Schließen und Öffnen div-Tags hinzufügen jede Menge X an divs in einem anderen div

Question

SIE DIESE

var groups = {}; 
$(".product-list .product-list_item").each(function(i) { 
    var c = $(this).attr("class"); 
    if(!groups[c]) groups[c] = []; 
    groups[c].push(this);   
});  
for(var i in groups) {  
    $(groups[i]).wrapAll('<div class="product-list_row" />').each(function(i){ 
     if (((i+1) % 3) == 0) 
      $(this).after('</div><div class="product-list_row">'); 
     }); 
    } 

GOAL - ich möchte dies erhalten:

<div class="product-list"> 
    <div class="product-list_item jackson">x</div> 
    <div class="product-list_item jackson">x</div> 
    <div class="product-list_item jackson">x</div> 
    <div class="product-list_item jackson">x</div> 
    <div class="product-list_item mason">x</div> 
    <div class="product-list_item mason">x</div> 
    <div class="product-list_item mason">x</div> 
</div> 
<div class="whatever"> 
    <p>hello i'm a different div</p> 
</div> 
<div class="product-list"> 
    <div class="product-list_item taylor">x</div> 
    <div class="product-list_item taylor">x</div> 
    <div class="product-list_item pencil">x</div> 
    <div class="product-list_item pencil">x</div> 
    <div class="product-list_item pencil">x</div> 
</div> 

aussehen dies:

<div class="product-list"> 
    <div class="product-list_row"> 
    <div class="product-list_item jackson">x</div> 
    <div class="product-list_item jackson">x</div> 
    <div class="product-list_item jackson">x</div> 
    </div> 
    <div class="product-list_row"> 
    <div class="product-list_item jackson">x</div> 
    </div> 
    <div class="product-list_row"> 
    <div class="product-list_item mason">x</div> 
    <div class="product-list_item mason">x</div> 
    <div class="product-list_item mason">x</div> 
    </div> 
</div> 
<div class="whatever"> 
    <p>hello i'm a different div</p> 
</div> 
<div class="product-list"> 
    <div class="product-list_row"> 
    <div class="product-list_item taylor">x</div> 
    <div class="product-list_item taylor">x</div> 
    </div> 
    <div class="product-list_row"> 
    <div class="product-list_item pencil">x</div> 
    <div class="product-list_item pencil">x</div> 
    <div class="product-list_item pencil">x</div> 
    </div> 
</div> 

FRAGE - Wie kann ich jQuery dazu bringen, ein schließendes Tag und ein öffnendes Tag für .product-list_row wie </div><div class="product-list_row"> einzufügen, ohne dass es das schließende Tag ignoriert und dann ein schließendes Tag zu demselben neuen öffnenden Tag hinzufügt. Wenn man sich die Aufteilung der "Jackson" -Klassengruppe direkt oben anschaut, so versuche ich es zu bekommen.

Es wird die gruppierten divs mit dem gleichen Klassennamen mit dem dynamisch erstellten product-list_row div. Und dann innerhalb dieser Gruppe findet und fügt sie nach X-Zahl von divs korrekt html ein, aber sie formatiert es nicht richtig für meine Bedürfnisse, da jQuery automatisch schließt und mein schließendes Tag entfernt.

hier mein FIDDLE ich ein paar Vorschläge hier gefunden, die mich an den Code führe ich mit bin durcheinander, und ich habe eine Geige von hier: http://jsfiddle.net/jonnyplow/Lqj73ewv/

Irgendwelche Ideen?

Answer 1

Ich werde jQuery nicht verwenden, um HTML-Tag-Struktur zu ändern.

Vielleicht können Sie Ihre for-Schleife so ändern.

var groups = {}; 
 
$(".product-list .product-list_item").each(function(i) { 
 
    var c = $(this).attr("class"); 
 
    if (!groups[c]) groups[c] = []; 
 
    groups[c].push(this); 
 
}); 
 

 
/* 
 
for (var i in groups) { 
 
    //$(groups[i]).wrapAll('<div class="product-list_row" />'); 
 
    $(groups[i]).wrapAll('<div class="product-list_row" />').each(function(i) { 
 
    if (((i + 1) % 3) == 0) 
 
     $(this).after('</div><div class="product-list_row">'); 
 
    }); 
 
}*/ 
 

 
for (var i in groups) { 
 
    var group = groups[i]; 
 
    var count=0; 
 
    var rowEles=[]; 
 
    for(var j=0;j<group.length;j++){ 
 
    rowEles.push(group[j]); 
 
    count++; 
 
    if(rowEles.length==3||count==group.length){ 
 
     $(rowEles).wrapAll('<div class="product-list_row" />'); 
 
     rowEles=[]; 
 
    } 
 
    } 
 
}

body { 
 
    padding: 20px; 
 
} 
 

 
.product-list { 
 
    margin-bottom: 10px; 
 
    padding: 5px; 
 
    border: 1px solid red; 
 
} 
 

 
.product-list_row { 
 
    border: 1px solid #bbb; 
 
    padding: 5px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.whatever { 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="product-list"> 
 

 
    <div class="product-list_item jackson">x</div> 
 
    <div class="product-list_item jackson">x</div> 
 
    <div class="product-list_item jackson">x</div> 
 
    <div class="product-list_item jackson">x</div> 
 
    <div class="product-list_item mason">x</div> 
 
    <div class="product-list_item mason">x</div> 
 
    <div class="product-list_item mason">x</div> 
 

 
</div> 
 
<div class="whatever"> 
 
    hello i'm different 
 
</div> 
 
<div class="product-list"> 
 

 
    <div class="product-list_item taylor">x</div> 
 
    <div class="product-list_item taylor">x</div> 
 
    <div class="product-list_item pencil">x</div> 
 
    <div class="product-list_item pencil">x</div> 
 
    <div class="product-list_item pencil">x</div> 
 

 
</div>