使用javascript添加li标签

Question

嗨，我有一个问题，我在下面有一个代码示例代码：

<div class="fadein">   
<img src="banner1.jpg" width="645" height="300"/>text 1  
<img src="banner2.jpg" width="645" height="300"/>text 2   
<img src="banner3.jpg" width="645" height="300"/>text 3 
<img src="banner3.jpg" width="645" height="300"/>text 4 
</div>

它是由php脚本呈现的，有什么办法可以使用javascript ex在每个图像和文本上添加li / li。

<li><img src="banner1.jpg" width="645" height="300"/>text 1</li>  
<li><img src="banner2.jpg" width="645" height="300"/>text 2</li>

我正在尝试在上面使用简单的jquery幻灯片显示，但是当淡入和淡出时文本不会加入图像，可能是因为我可以使用其他幻灯片显示效果

任何想法谢谢。

我对php没有控制/想法。

伙计们，这里是您脚本的源代码

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
 </script>
 <script type="text/javascript"> 
 $(document).ready(function() { var i = 0,     
 imgTxt = $('.fadein').text().trim      ().split('\n'),     
 wrapedImgs =    $('.fadein').children().map(function() {         
 var tmp = '<img   src="' + this.src + '" width="' + this.width + '" 
 height="' + this.height + '" />' + imgTxt[i];         i += 1;         return   
 tmp;     }).get().join('</li><li>');  $('.fadein').html('<ul><li>' + wrapedImgs 
 + '</li></ul>'); }); 
 </script>
</head>

<body>
<div class="fadein">    <img src="banner1.jpg" width="645" height="300"/>text 1   
<img src="banner2.jpg" width="645" height="300"/>text 2    <img src="banner3.jpg"   
width="645" height="300"/>text 3  <img src="banner3.jpg" width="645"  
 height="300"/>text 4   </div> 
</body>
</html>

Answer 1

如果您已经在使用jQuery，则可以使用.wrapAll（）包装图像，并使用.content（）获取包括文本在内的所有元素，然后将其放置在先前制作的li中：

elems = $('.fadein').contents();
for ( i=0 ; i<elems.length;i++){
    if (elems[i] instanceof Text && elems[i-1] instanceof HTMLImageElement) 
        $(elems[i-1]).after($(elems[i])); 
    else if 
        (elems[i] instanceof HTMLImageElement) $(elems[i]).wrapAll('<li>');
}

编辑 JSFiddle示例，即使您应该使用ul，但这也是您要的内容

Answer 2

您可以使用jQuery完成此操作。 在这里开始阅读： http : //api.jquery.com/category/selectors/

您将使用选择器来获取带有fading类的div容器（这是页面上唯一的一个吗？），然后您应该能够进一步在容器中的图像/文本周围包裹li标签。

您将需要在一个

$(document).ready(function(){ 
  // Your code here
});

该函数可确保代码和操作在文档加载后但呈现之前执行。

其他人可以提供完整的代码示例：）

编辑：这里还假设您已经使用jQuery幻灯片放映方式加载了jQuery。

Answer 3

这就是我会做的

$(document).ready(function() {
var i = 0,
    imgTxt = $('.fadein').text().trim().split('\n'),
    wrapedImgs = $('.fadein').children().map(function() {
        var tmp = '<img src="' + this.src + '" width="' + this.width + '" height="' + this.height + '" />' + imgTxt[i];
        i += 1;
        return tmp;
    }).get().join('</li><li>');

$('.fadein').html('<ul><li>' + wrapedImgs + '</li></ul>');
});

一个jsfiddle示例可以在这里找到。

希望这可以帮助！

使用javascript添加li标签

问题描述

3 个解决方案

解决方案1
1 2011-01-20 20:01:22

解决方案2
0 2011-01-20 19:04:24

解决方案3
0 2011-01-20 20:03:55

使用javascript添加li标签

问题描述

3 个解决方案

解决方案1 1 2011-01-20 20:01:22

解决方案2 0 2011-01-20 19:04:24

解决方案3 0 2011-01-20 20:03:55

解决方案1
1 2011-01-20 20:01:22

解决方案2
0 2011-01-20 19:04:24

解决方案3
0 2011-01-20 20:03:55