jQuery - 項目の最後の行の後にdivを挿入しないスクリプト

Question

このスクリプトを使用して、要素の各行の後にdivを挿入しています。問題は、行がいっぱいでなければ要素の最後の行の後に1つ追加していないということです（つまり、行に1または2の要素しかない場合はdivは追加されませんが、3つの要素がある場合はそうです）。

誰でもトラブルシューティングを手伝ってもらえますか？

ここに関数があります。

function separateRows(parent, children) { 
    var panelHtml = '\ 
     <div class="team-member__panel"> \ 
     </div> \ 
    '; 
    var $elems = $(parent + ">" + children); 
    var top = $elems.first().offset().top; 
    var n = 1; 
    while(n < $elems.length && $elems.eq(n).offset().top == top) 
     n++; 
    var $div = $(panelHtml); 
    $div.insertAfter(parent + ">" + children + ":nth-child(" + n + "n)"); 
} 
separateRows(".team-members", ".team-member"); 

ここはフィドルです。 https://jsfiddle.net/zbqq782m/

Answer 1

各n番目の要素の後にdivを追加します。

n = 3の場合、3番目と6番目の要素の後に追加します。 8つの要素がある場合、後に挿入する要素はもうありません（nineth要素のように）。あなたが手動で最後の要素の後にそれを追加する必要があります。この場合

：filter()を使用して

function separateRows(parent, children) { 
    var panelHtml = '\ 
     <div class="team-member__panel"> \ 
     </div> \ 
    '; 
    var $elems = $(parent + ">" + children); 
    var top = $elems.first().offset().top; 
    var n = 1; 
    while(n < $elems.length && $elems.eq(n).offset().top == top) 
     n++; 
    var $div = $(panelHtml); 
    $div.insertAfter(parent + ">" + children + ":nth-child("+n+"n)"); 

    if (($elems.length % n) != 0) { 
     $(panelHtml).insertAfter(parent+">"+children+":last"); 
    } 

} 
separateRows(".team-members", ".team-member"); 

Answer 2

アプローチと（次の要素が存在する場合）next()要素のオフセットに現在の要素を比較する

function separateRows(parent, children) { 
    var panelHtml = '\ 
      <div class="team-member__panel"> \ 
      </div> \ 
     '; 

    $(parent).children(children).filter(function(i) { 
    var $el = $(this), $next = $el.next(); 
    // if no $next is last element and needs separator 
    return !$next.length || $next.offset().top > $el.offset().top; 
    }).after(panelHtml); 


} 

DEMO