用jquery包装第n个子项

Question

嗨，我为我构建的网格提供了第n个子选择器模式。为了获得更多的控制权，我希望其中一些被封装到div.中

我试着用jquery wrapAll来实现这一点。但这将打破网格的模式。

所以我的问题是，如果我写错了什么，或者是否有其他方法可以实现

这就是我所拥有的：

$(".item:nth-child(6n+1), .item:nth-child(6n+2), .item:nth-child(6n+3)")
.wrapAll( "<div class='row'></div>");
$(".item:nth-child(6n+4), .item:nth-child(6n+5)")
.wrapAll( "<div class='row'></div>");

body {
position: relative;
margin: 0 auto 0 auto;
width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
}
.item {
margin: 50px 20px;
text-align: center;
position: relative;
}
.item img {
width: 100%;
}
.projectTitle {
position: absolute;
width: 95%;
top: 100%;
}
/* ROW */
.item:nth-child(6n+1) { width: 25%; }
.item:nth-child(6n+2) { width: 25%; }
.item:nth-child(6n+3) { width: 25%; }
/* ROW */
.item:nth-child(6n+4) { width: 80%; }
.item:nth-child(6n+5) { width: 40%; }
.item:nth-child(6n)   { width: 40%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="item">
<img src="http://via.placeholder.com/875x1200">
<div class="projectTitle">
Hello<br><span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/480x655">
<div class="projectTitle">
Hello<br><span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/475x650">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/800x450">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/875x625">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/655x480">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/475x650">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/800x450">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/520x250">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/475x625">
<div class="projectTitle">
Hello<span>Title</span>
</div>
</div>

Answer 1

根据您的更新注释，您似乎希望将每组3项放在自己的行中。

可以使用递增3和slice()的循环来获得每个项目组，并在每次迭代时附加一个新行

var $cont = $('.row').parent(),
$items = $('.item:gt(2)');
for (var i = 0; i < $items.length; i = i + 3) {
$('<div class="row">').append($items.slice(i, i + 3)).appendTo($cont);
}

.row {
border: 2px solid #ccc;
padding: 10px;
margin-top: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
</div>