使用javascript添加li标签

Question

Hi I have a problem I have a code example code below: 嗨，我有一个问题，我在下面有一个代码示例代码：

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

which is rendered by a php script is there any way I could add li/li on each image and text using javascript ex. 它是由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>

I am trying to use simple jquery slideshow on it but the text won't join the image when fading in and fading out, may be with the li I could use another slide show effect 我正在尝试在上面使用简单的jquery幻灯片显示，但是当淡入和淡出时文本不会加入图像，可能是因为我可以使用其他幻灯片显示效果

any idea thanks. 任何想法谢谢。

I have no control/idea on the php. 我对php没有控制/想法。

Guys heres the source code for your script 伙计们，这里是您脚本的源代码

 <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

If your already using jQuery you could use the .wrapAll() to wrap the images and .content() to get all elements including text, and then place it inside the previously made li: 如果您已经在使用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>');
}

EDIT JSFiddle example, even though you should use ul , but here is what you asked for 编辑 JSFiddle示例，即使您应该使用ul，但这也是您要的内容

Answer 2

You can do this with jQuery. 您可以使用jQuery完成此操作。 Start reading here: http://api.jquery.com/category/selectors/ 在这里开始阅读： http : //api.jquery.com/category/selectors/

You'll use a selector to grab the div container with the class fadein (it's the only one on the page right?) and from that you then should be able to further wrap li tags around your images/text within that container. 您将使用选择器来获取带有fading类的div容器（这是页面上唯一的一个吗？），然后您应该能够进一步在容器中的图像/文本周围包裹li标签。

You'll want to do all this coding in a 您将需要在一个

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

function which ensures the the code and manipulation is performed after the document has been loaded but before it has been rendered. 该函数可确保代码和操作在文档加载后但呈现之前执行。

Someone else can provide a full code example :) 其他人可以提供完整的代码示例：）

EDIT: Also assuming here that you already have jQuery loaded since you're using a jQuery slideshow. 编辑：这里还假设您已经使用jQuery幻灯片放映方式加载了jQuery。

Answer 3

Here's how I would do it 这就是我会做的

$(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>');
});

A jsfiddle example can be found here . 一个jsfiddle示例可以在这里找到。

Hope this helps! 希望这可以帮助！

使用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