Question

我正在动态生成图像并愿意在每组三个图像后添加中断，因此每组三个图像都是新行：

<img class="test">
<img class="test">
<img class="test">
<img class="test">
<img class="test">

预期结果：

<img class="test">
<img class="test">
<img class="test">
<br>
<img class="test">
<img class="test">
<img class="test">

Answer 1

您可以使用:nth-child和.after()：

$(function () {
  $(".test:nth-child(3n)").after("<br />");
});

.test {border: 1px solid #999; width: 25px; height: 25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <img class="test" />
  <img class="test" />
  <img class="test" />
  <img class="test" />
  <img class="test" />
</div>

Answer 2

只是这个

$('.test:nth-child(3n)').after('<br>')

使用nth-child selector选择第3个元素

Answer 3

似乎可以通过几行CSS非常简单地（并自动地）完成。没有必要使用Javascript或加载+ 50kb库。

MDN CSS参考：nth-child pseudo-class

运行代码段以尝试

#images img {
  margin: 2px;
  float: left;
}
#images img:nth-child(3n+1) {
  clear: left;
}

<div id="images">
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
  <img src="http://placehold.it/50x50"/>
</div>

在每组三个图像jquery之后添加中断

3 个答案: