Envuelva un grupo de elementos con niños

Estoy tratando de colocar el resultado de una aplicación de carrito de compras en un diseño de arranque con jQuery. La salida de mi html se parece a esto

<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
agregado editado
Puntos de vista: 1
fuente
ro ru fr pt de zh hi bn ar
No, están ahí en el código. Lo copié de Firebug sin abrirlo para aclararlo.
agregado el autor bigwater, fuente
¿No faltan todos esos divs cerrando las etiquetas </div> ?
agregado el autor j08691, fuente

3 Respuestas

Puedes usar:

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.

Ejemplo de jsFiddle

Lo anterior producirá:

<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
agregado
fuente
Tanto j08691 como las respuestas indefinidas son excelentes y funcionó muy bien en las páginas de prueba, desafortunadamente. Parece que tengo algún conflicto con otro código, así que todavía me estoy pateando, pero gracias por las excelentes respuestas. Micro
agregado el autor bigwater, fuente
No me di cuenta al principio, pero algunos de los divs contenían etiquetas de scripts, aparentemente .wrap tiene problemas con la ejecución de scripts. enlace En mi caso, se usaron para escribir los elementos html en la página, así que simplemente los pude eliminar antes de usar el código anterior, como enlace
agregado el autor bigwater, fuente
Hice un test , su código vuelve a consultar el DOM pero no es más lento que el almacenamiento en caché.
agregado el autor undefined, fuente

Puede utilizar el método jQuery .slice() y un para loop:

var $e = $('.CWlistingBox');
for ( var i = 0; i < $e.length; i+=2 ) {
   $e.slice(i, i+2).wrapAll('<div class="row"/>');
}
0
agregado
fuente
demo: jsfiddle.net/arunpjohny/4Lm26/1
agregado el autor Arun P Johny, fuente
@ArunPJohny Gracias.
agregado el autor undefined, fuente

No estoy seguro de qué quiere decir con 2-3 div que debe envolver .. puedes usar $ .wrap() para esto ..

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

$('.col-md-4').wrap("<div class='row'>");
0
agregado
fuente
Quiere decir que necesita envolver los div en grupos de dos o tres.
agregado el autor j08691, fuente
JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

En este grupo hablamos de JavaScript. Partner: es.switch-case.com

Abierto Telegram