Add li element around every second <span> tag with jQuery

Question

Hi,

don't know if this is possible .. I want to add a li element to every second span-tag. My HTML look like that:

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

At the end, it should look like this:

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

Any Ideas? Thanks :)

Answer 1

You can use .wrapAll() and .slice() in a loop, like this:

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, be sure to do something like this at the end, since <li> elements need a parent:

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