添加休息

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選擇第三個元素

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>