Wickeln Sie eine Gruppe von Elementen mit Kindern

Ich versuche, die Ausgabe von einer Einkaufswagen-App in ein Bootstrap-Layout mit jQuery zu platzieren. Meine HTML-Ausgabe sieht ungefähr so ​​aus

<div id="CWlistings" class="CWcontent">

<div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> <div class="CWlistingBox col-md-4 col-sm-6" style=""> </div> <div class="CWclear"></div>


(from firebug, each div has a child div with its own children.) I need to wrap either 2 or 3
"<div class="CWlistingBox col-md-4 col-sm-6" style="">" 's 

in a div class="row" depending on screen width. I've tried .wrap() and .wrapAll() about every way I can think of but all I get is errors. Thanks much in advance.
0
Nein, sie sind dort im Code, ich habe es einfach aus dem Feuerwanze kopiert, ohne sie für Klarheit zu öffnen.
hinzugefügt der Autor bigwater, Quelle
Sind nicht alle diese Divs, die </div> -Tags schließen?
hinzugefügt der Autor j08691, Quelle

3 Antworten

Sie können verwenden:

while ($('#CWlistings > div.CWlistingBox').length) {
    $('#CWlistings > div.CWlistingBox:lt(3)').wrapAll('<div class="row" />');
}

:lt(3) will wrap the divs in groups of three. Use :lt(2) to wrap them in groups of two.

jsFiddle-Beispiel

Das obige wird produzieren:

<div id="CWlistings" class="CWcontent">
     

    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="CWclear"></div>
</div>
0
hinzugefügt
Sowohl die Antworten von j08691 als auch die von undefined sind exzellent und funktionierten auf Test-Seiten leider sehr gut. Ich habe anscheinend Konflikte mit anderem Code, also trete ich immer noch selbst, aber danke für die tollen Antworten. Mike
hinzugefügt der Autor bigwater, Quelle
Ich habe es zuerst nicht bemerkt, aber einige divs enthielten Skript-Tags, anscheinend hat .wrap Probleme beim Ausführen von Skripten. link In meinem Fall wurden sie verwendet, um die HTML-Elemente auf die Seite zu schreiben, so dass ich sie einfach entfernen konnte, bevor ich den obigen Code benutzte. link
hinzugefügt der Autor bigwater, Quelle
Ich habe einen -Test durchgeführt, der Code fragt das DOM ab, aber es ist nicht langsamer als das Caching.
hinzugefügt der Autor undefined, Quelle

Sie können die Methode jQuery .slice() und einen einfachen für schleife:

var $e = $('.CWlistingBox');
for ( var i = 0; i < $e.length; i+=2 ) {
   $e.slice(i, i+2).wrapAll('<div class="row"/>');
}
0
hinzugefügt
hinzugefügt der Autor Arun P Johny, Quelle
@ArunPJohny Danke.
hinzugefügt der Autor undefined, Quelle

Ich bin nicht sicher, was meinst du mit 2-3 Div müssen Sie wickeln .. Sie können dafür $ .wrap() verwenden.

Jsfiddle: http://jsfiddle.net/kHRJA/

$('.col-md-4').wrap("<div class='row'>");
0
hinzugefügt
Er meint, dass er die divs in Gruppen von zwei oder drei zusammenpacken muss.
hinzugefügt der Autor j08691, Quelle
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.