如何计算行项目和

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