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

Answer 2

如果您正在寻找一个选择器来完成这项工作，您可以使用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 3

你可以像这样做一点微尘：

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 4

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

Answer 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()

快得多

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

5 个答案: