jQuery: Convert every four LI into one

I'm working on a slider, where I want to convert every four LI into one LI.

The slider shows a LI with four elements at the time. I want the content to be SPANs contained in a LI.

From: (one SPAN per LI)

<li><span>#Content</span></li>
<li><span>#Content</span></li>
<li><span>#Content</span></li>
<li><span>#Content</span></li>
<li><span>#Content</span></li>
<li><span>#Content</span></li>

...into: (four SPAN per LI)

<li><span>#Content</span><span>#Content</span>&l开发者_运维技巧t;span>#Content</span><span>#Content</span></li>
<li><span>#Content</span><span>#Content</span></li>

I can't seem to find any information on the Internet, about this technique. What should I do?

Does it make any sense? Sorry about my poor English...

You can loop through with .slice() and .wrapAll() like this:

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

You can test it out here. What this does is .unwrap() to remove the initial <li> wrappers, then looping through insets of 4, uses .slice() to get the set we're working with (it'll properly handle the last 4 or less) and use .wrapAll() on those <span> elements to put them in a new <li>.

Fetch content of 4 li and concatinate content into single li Try to use create_html.js (plugin) to create li efficiently