选择元素的子集，并将它们包装在一个 div 中答案

【问题标题】：Select subsets of elements, and wrap them in a div选择元素的子集，并将它们包装在一个 div 中
【发布时间】：2023-03-18 17:08:01
【问题描述】：

我在 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>');

但是有一个选择器可以选择五个一组的元素。

谢谢！

【问题讨论】：

这里有很多很棒的答案！谢谢大家！

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以像这样稍微紧凑一点：

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

这会导致您在问题中得到的确切结果:) 您可以将 5 设为变量并包装您想要的孩子数量，其余的（在本例中为最后 2 个）将被包装在他们自己的包装在最后。

【讨论】：

【解决方案2】：

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>');

【讨论】：

【解决方案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>');

只要确保你以相反的顺序进行:-)

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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() 快得多

【讨论】：