不知道这是否可行.. 我想在每个第二个span-tag中添加一个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>
任何想法?谢谢:))
答案 0 :(得分:3)
您可以在循环中使用.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 />");