упаковка элементов в новый div

Question

У меня есть ниже HTML:

<div id="one">
    <div class="two">
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
    </div>
</div>

в jQuery, если мне нужно обернуть каждые 3 элемента в новый div, как показано ниже, как я могу это сделать?

<div id="one">
    <div class="two">
        <div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
        </div>
        </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
        </div>
        <div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
        </div>
    </div>
</div>

Я попробовал кусочек и обертку, которые мне не очень помогли. Есть идеи? ценим вашу помощь в этом.

Спасибо, L

Answer 1

var entries = $('#one > .two > div.entry');

entries.each(function(i) {
    if( i % 3 == 0 ) entries.slice(i,i+3).wrapAll('<div>');
});

http://jsfiddle.net/PZkSL/

Answer 2

Как насчет получения элемента div с классом "two" и перебора его дочерних элементов? Когда вы найдете первого ребенка, используйте $ (firstChild) .before ('<div>'); и для третьего ребенка используйте $ (thirdChild) .after ('</div>'); Просто повторяйте все с помощью этого метода. Не использовали .before () или .after (), поэтому не знаете, как это получится. Удачи.

Answer 3

Я бы просто написал простой цикл for, что-то вроде:

var two = $(".two");
var elements = $(".entry");
var group = [];
for(var i=0;i<elements.length;i++) {
  var mod = i % 3;
  if(mod == 0 && group.length > 0) {
    var container = $('<div></div>');
    two.append(container);
    for(var j=0;j<group.length;j++) {
      container[0].appendChild(group[j]);
    }
    group = [];
  }
  group[mod] = elements[i];
}

Answer 4

Обратитесь к этому Как обернуть каждые 3 дочерних элемента html с помощью jquery? или Обернуть каждые 3 деления в div