jQuery after 4 img add some tag

Question

I have list of pictures and i want after every 4 pictures add li tag. some like this.

I have this.

<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />

<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />

that looks like this

<li>
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
</li>
<li>    
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
</li>

it may be possible !? thanks anyway.

Answer 1

With .slice(), you can get slices of matched elements, images in your case. These you can then replace with a new container element whose content are the elements themselves ... best explained in this fiddle: http://jsfiddle.net/BEGWZ/1/

var ps = $('p');
var offset = 2;
for (var i = 0; i < ps.size(); i += offset) {
    ps.slice(i, i + offset).wrapAll('<div></div>');
}

Edit: Duplicate question linked by Val had a better way of doing it

Answer 2

With @wutz' soloution you could do it like this: http://jsfiddle.net/p73SV/

var ps = $('img');
var offset = 4;
for (var i = 0; i < ps.size(); i += offset) {
    var container = $('<li></li>');
    var content = ps.slice(i, i + offset);
    content.replaceWith(container);
     container.html(content).appendTo('ul');
}