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幻灯片，但文本在淡入和淡出时不会加入图像，可能与li我可以使用其他幻灯片效果

任何想法都谢谢。

我对php没有控制/想法。

Guys继承了脚本的源代码

 <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/

你将使用一个选择器来获取带有 fadein 类的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示例here。

希望这有帮助！

使用javascript添加li标签

3 个答案: