Question

我在这里看到了一些答案，但似乎无法使其发挥作用。

我有一组可重复的HTML，如下所示：

<div id="content">

<article>
<div>
<article>
<div>
<article>
<div>
<article>
<div>
<article>
<div>
<article>
<div>

</div>

等。这可以根据条目的数量无限地进行。

我想要做的是在div中包装每三组文章/ div。所以我会：

<div id="content">

<div class="wrap">
<article>
<div>
<article>
<div>
<article>
<div>
</div>

<div class="wrap">
<article>
<div>
<article>
<div>
<article>
<div>
</div>

</div>

我确信这很容易，但出于某种原因，我无法让它发挥作用。任何和所有的帮助非常感谢！

Answer 1

您可以使用.slice()方法：

var $e = $('#content').children();

for (var i = 0; i < $e.length; i+=3) {
  $e.slice(i, i+3).wrapAll('<div class="wrap">');
}

Answer 2

nth-child选择器是另一种选择，但不如undefined的解决方案那么好：

 $('#content > article:nth-child(3n+1)').before('<div class="wrap">');
 $('#content > div:nth-child(3n+1)').after('</div>');

包裹<div>标签</div>中的元素集

2 个答案: