jquery - 使用 jQuery 在每个第二个 标签周围添加 li 元素

Question

不知道这是否可能..我想为每个第二个 span 标记添加一个 li 元素。我的 HTML 看起来像这样:

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

最后，它应该看起来像这样:

<li>
    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>
</li>
<li>  
    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>
    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>
</li>

有什么想法吗？谢谢:)

Answer 1

您可以使用 .wrapAll() 和 .slice() 循环中，如下所示:

var spans = $("span.article_item");
for(var i = 0; i < spans.length; i+=2) {
  spans.slice(i, i+2).wrapAll("<li />");
}

You can test it out here ，请务必在最后执行类似的操作，因为 <li>元素需要一个父元素:

$("li").wrapAll("<ul />");