Выберите подмножества элементов и оберните их в div

Question

У меня есть набор выделенных элементов в jQuery:

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

Я бы хотел обернуть эти элементы в группы по пять человек так:

<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
</div>

Есть ли эффективный / простой способ сделать это? Я думаю, это будет выглядеть примерно так:

$('.element').wrapAll('<div class="wrapper"></div>');

Но с селектором, который выбирает элементы в группах по пять.

Спасибо!

Answer 1

var elems = $('.element');
for(var i = 0; i <= elems.length-1; i+=5) {
  elems.slice(i, i+5).wrapAll('<div class="wrapper"></div>');
}

(меняется elems.length на elems.length-1) Поскольку массивы начинаются с 0, elems.length даст вам 12, но elems [12] не определено;

Я бы рекомендовал использовать нативный for, так как он намного быстрее, чем .each()

Answer 2

$('.element:nth-child(5n-4)').each(function(i){
    $(this).nextUntil('.element:nth-child(6n+'+i+')').andSelf()
        .wrapAll('<div class="wrapper"></div>');
});

Answer 3

Если вы ищете селектор для выполнения работы, вы можете использовать 2, :gt() (больше-чем) и :lt() (меньше-чем):

$(".element:gt(9):lt(15)").wrapAll('<div class="wrapper"></div>');
$(".element:gt(4):lt(10)").wrapAll('<div class="wrapper"></div>');
$(".element:lt(5)").wrapAll('<div class="wrapper"></div>');

Просто убедитесь, что вы делаете это в обратном порядке: -)

Answer 4

Вы можете сделать это немного компактнее, как это:

var elems = $('.element');
for(var i = 0; i <= elems.length; i+=5) {
  elems.slice(i, i+5).wrapAll('<div class="wrapper"></div>');
}

Это приводит к точному результату, который у вас есть в вопросе :). Вы можете сделать это 5 переменной и обернуть количество нужных вам детей, остаток (в данном случае последние 2) будет обернут в свои собственные обертка в конце.

Answer 5

var elements = [];
$('.element').each(function(index, element) {
    elements.push(element);
    if (index > 0 && index % 4 == 0) {
        $(elements).wrapAll('<div class="wrapper"></div>');
        elements.splice(0, elements.length);
    }
});
$(elements).wrapAll('<div class="wrapper"></div>');