行の項目を数えてdivの後にdivを追加する方法

Question

a行の項目数を数える関数を作成しようとしています。そして、その項目の後ろにdivを挿入して、項目数の下に全体の行が入るようにしたいのです。

ここまでは私の機能です。でも、必ず私は正しい軌道に乗ってる場合...詳細はこのCodePenを参照してくださいません：http://codepen.io/Auzy/pen/gmYBJy

var parentSelector = $('.container'); 
var childSelector = $('.box'); 

function countFirstRowItems(parentSelector, childSelector){ 
     var count = 0, theTop = undefined; 
     $(parentSelector + " > " + childSelector).each(function(){ 
      var thisTop = $(this).offset().top; 
      if(theTop === undefined){ 
       theTop = thisTop; 
      } 
      if(thisTop != theTop){ 
       return false; 
      } 
      count++; 
     }); 
     return count; 
    } 

console.log(countFirstRowItems()); 

Answer 1

function separateRows(parent, children) { 
 
    var $elems = $(parent + ">" + children);      // get the elements 
 
    var top = $elems.first().offset().top;       // get the offsetTop of the first 
 
    var n = 1;              // n will be the number of items in the same row 
 
    while(n < $elems.length && $elems.eq(n).offset().top == top) // while there still elements and the current element got the same offsetTop as the first, increment n 
 
    n++; 
 
    var $div = $("<div class='div'></div>");      // the div that will take a whole row (see CSS) 
 
    $div.insertAfter(parent + ">" + children + ":nth-child(" + n + "n)"); // add the div after each n elements 
 
} 
 

 
separateRows(".container", ".box");

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; /* I added this too (not important though) */ 
 
    background-color: #333; 
 
} 
 

 
.box, .div { 
 
    background-color: #444; 
 
    margin: 1em; 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 1em; 
 
} 
 

 
.div { 
 
    background-color: red; 
 
    width: 100%; /* to take a whole row */ 
 
}

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

Answer 2

これはdivの挿入に対応していませんが、それは、コードの権利と間違って何対処しません今。

これらの行：

var parentSelector = $('.container'); 
var childSelector = $('.box'); 

行くとあなたのjQueryを取得するには、一致する要素のセット包まれました。彼らは、セレクタとして有効ではありませんので、あなたは、このやるしようとすると：あなたがオブジェクトを使用している、ここでは文字列を使用していないので、

$(parentSelector + " > " + childSelector).each(function(){ 

コードがクラッシュします。

代わりに、値を文字列として関数に直接渡すだけです。

また、見つかった要素の数を取得しようとしている場合は、countを1でバンプします。

最後に、変数を初期化しない場合は、これが初期化されるため、undefinedで変数を初期化しないでください。代わりに、 'null'でそれらを初期化し、それをチェックしてください。

function countFirstRowItems(p, c){ 
 

 
    var count = 1, theTop = null; 
 
    
 
    $(p + " > " + c).each(function(){ 
 
    var thisTop = $(this).offset().top; 
 
    console.log(this); 
 
    
 
    if(!theTop){ 
 
     theTop = thisTop; 
 
    } 
 
    
 
    if(thisTop != theTop){ 
 
     return false; 
 
    } 
 
    
 
    count++; 
 
}); 
 
    
 
    return count; 
 
} 
 

 
console.log(countFirstRowItems(".container", ".box"));

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-color: #333; 
 
} 
 
.box { 
 
    background-color: #444; 
 
    margin: 1em; 
 
    height: 250px; 
 
    width: 250px; 
 
    border-radius: 1em; 
 
}

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

Answer 3

あなたは最後の子を対象とし、クラスの後、擬似を適用するためにCSSを使用することができます。

.box:last-child:after{ } 

Code Pen