如何計算行項目和

Question

我試圖寫計數的行中的項目數的函數後追加格。然後，我想在多個項目之後插入一個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(){ 

的代碼崩潰，因爲你不使用字符串在這裏，你正在使用的對象。

相反，只需要直接傳遞值作爲字符串的函數。

另外，如果您正在嘗試獲取找到的元素數量，那麼您會遇到count1。

最後，不要在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