Wie zähle ich Elemente in Zeile und füge div nach

Question

hinzu

Ich versuche, eine Funktion zu schreiben, die die Anzahl der Elemente in der a-Zeile zählt. Dann möchte ich ein div hinter diese vielen Elemente einfügen, so dass es eine ganze Zeile unter den gezählten Elementen aufnimmt.

Hier ist meine Funktion so weit. Nicht einmal sicher, ob ich auf richtigen Weg bin ... Bitte beachten sie diese CodePen für weitere Informationen: 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

Dies ist nicht das Einführen des div adressiert, aber es tut Adresse, was mit dem Code richtig falsch ist jetzt.

Diese Linien:

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

gehen und bekommen Sie ein JQuery passender Elemente wrapped gesetzt. Sie gelten nicht als Selektoren, so dass, wenn Sie dann versuchen, dies zu tun:

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

Der Code abstürzt, weil Sie nicht Strings hier sind, können Sie Objekte verwenden.

Stattdessen übergeben Sie einfach die Werte als Zeichenfolgen direkt an die Funktion.

Sie stoßen auch count von 1, wenn Sie versuchen, die Anzahl der gefundenen Elemente zu erhalten.

Schließlich initialisieren Sie keine Variablen bei undefined, da dies das ist, worauf sie initialisiert werden, wenn Sie sie überhaupt nicht initialisieren. Initiiere sie stattdessen auf 'null' und überprüfe das.

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

Sie CSS verwenden könnte das letzte Kind und wenden Sie die Pseudo nach dem Unterricht zum Ziel.

.box:last-child:after{ } 

Code Pen