Wie wählt man die ersten X DIV

Question

Ich habe z. 8 DIV (Bilder enthalten) in einer Reihe. Mein Problem ist, dass ich in der Lage sein werde, eine neue Zeile nach X zu erhalten (diese Zahl ist in einem Schieberegler eingestellt) DIV's. Im Falle dieser 8 DIVs möchte ich nach z. 4 DIVs.

Mein divs wie folgt aussehen:

<div id="table-cell-x" class="table-cells"><img src="...."></div> 

Wo x = 1 -> 8

Das Ergebnis I ist (im Falle von 8 DIVs und X bis 4 gesetzt) ​​werden soll:

<div class="table-rows"> 
    <div id="table-cell-1" class="table-cells">div1</div> 
    <div id="table-cell-2" class="table-cells">div2</div> 
    <div id="table-cell-3" class="table-cells">div3</div> 
    <div id="table-cell-4" class="table-cells">div4</div> 
</div> 

<div class="table-rows"> 
    <div id="table-cell-5" class="table-cells">div5</div> 
    <div id="table-cell-6" class="table-cells">div6</div> 
    <div id="table-cell-7" class="table-cells">div7</div> 
    <div id="table-cell-8" class="table-cells">div8</div> 
</div> 

ich versuchte es mit:

$('div.table-cells':lt(4)).append('<div class="table-row"></div>'); 
$('div.table-cells':gt(4)).append('<div class="table-row"></div>'); 

Aber das hat nicht funktioniert ........ können Sie mir bitte helfen mit diesem Problem ....

Grüße, John

Answer 1

Was ich komme zu verstehen, dass Sie jede 4 div.table-cells wollen nach innen eingewickelt ein Behälter table-row div.

Wenn ja, dann unten tun: -

$(document).ready(function(){ 
 
    var $child_div = $("div.table-cells"); 
 
    for (var i = 0; i < $child_div.length; i += 4) { 
 
     var $parent_div = $("<div/>", { 
 
      class: 'table-row' 
 
     }); 
 
     $child_div.slice(i, i +4).wrapAll($parent_div); 
 
    } 
 
});

.table-row{ 
 
background:grey; 
 
margin-bottom:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="table-cell-1" class="table-cells">div1</div> 
 
<div id="table-cell-2" class="table-cells">div2</div> 
 
<div id="table-cell-3" class="table-cells">div3</div> 
 
<div id="table-cell-4" class="table-cells">div4</div> 
 
<div id="table-cell-5" class="table-cells">div5</div> 
 
<div id="table-cell-6" class="table-cells">div6</div> 
 
<div id="table-cell-7" class="table-cells">div7</div> 
 
<div id="table-cell-8" class="table-cells">div8</div>

Referenz: -

.wrapAll() | jQuery API Documentation