JQuery для добавления div к списку изображений

Question

Эй, у меня есть список изображений, которые мне нужно обернуть с помощью div, чтобы каждые три изображения были в новом div.Первый div должен начинаться с начала и продолжаться в течение следующих трех изображений перед закрытием и открытием следующего div.Конечный HTML должен выглядеть следующим образом:

<div>
    <img />
    <img />
    <img />
</div>
<div>
    <img />
    <img />
    <img />
</div>
<div>
    <img />
    <img />
    <img />
</div>

Я знаю, что это должно что-то делать с селектором nth child, но до сих пор я мог выбирать только отдельные элементы, а не выбиратьтри за один раз.

Answer 1

скважина,

$('img:nth-child(3n)').each(function(){
    $(this).prevAll('img').andSelf().wrapAll('<div/>');
});

демо

Answer 2

Предполагая, что эти изображения находятся в контейнере с идентификатором container, вы можете сделать это:

Пример: http://jsfiddle.net/c2nQH/

var imgs = $('#container > img');

imgs.each(function(i) {
          // If we're on a multiple of 3...
    if (i % 3 == 0) {
              // ...take a slice of it and the next two, and wrap them.
        imgs.slice(i, i + 3).wrapAll('<div></div>');
    }
});

Answer 3

Вы можете сделать что-то вроде следующего:

var imgListLength = $imageList.length, // assuming $imageList is your jQuery object
    tmpArray = $imageList.toArray(),
    newHtml = '';

for (var i = 0; i < imgListLength; i = i + 3) {
  newHtml += '<div>';
  newHtml += tmpArray[i] + tmpArray[i + 1] + tmpArray[i + 2];
  newHtml += '</div>';
}

$('body').append(newHtml);