每秒添加li元素<span>使用jQuery標記

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 />");