Ajout d'un élément li autour de chaque seconde <span> tag avec jQuery

Question

Je ne sais pas si c'est possible .. Je souhaite ajouter un élément li à chaque seconde balise. Mon HTML ressemble à ça:

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

A la fin, il devrait ressembler à ceci:

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

Des idées? Merci :)

Answer 1

Vous pouvez utiliser .wrapAll() et .slice() dans une boucle, comme ceci:

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, assurez-vous de faire quelque chose comme ça à la fin, car <li> éléments ont besoin d'un parent:

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