如何计算行中的项目并追加div

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(){

代码崩溃是因为你没有在这里使用字符串，你正在使用对象。

相反，只需将值作为字符串直接传递给函数。

另外，如果您尝试获取找到的元素数量，那么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