jquery - Wrap set of elements in tag

Question

I've seen a few answers here on this but can't seem to make it work.

I have a set of repeatable HTML like this:

<div id="content">

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

</div>

Etc. this goes on infinitely based on the number of entries.

What I want to do is wrap every three sets of articles/divs in a div. So I would have:

<div id="content">

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

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

</div>

I'm sure this is something easy, but for some reason I can't get it to work. Any and all help much appreciated!

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器是另一种选择，但不如未定义的解决方案好：

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