javascript - 选择元素的子集，并将它们包装在 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; i+=5) {
  elems.slice(i, i+5).wrapAll('<div class="wrapper"></div>');
}

这会得到您在问题中得到的确切结果:)您可以将 5 设为一个变量并包装您想要的子代数量，其余部分(在本例中为最后 2 个)将最后用自己的 wrapper 包裹起来。