jQuery envolver múltiples elementos div en una misma clase

Hola me gustaría usar jQuery para envolver conjuntos de elementos de la clase en un div pero no puede encontrar la soluciónjQuery envolver múltiples elementos div en una misma clase

HTML:

<div class="view-content"> 

    <div class="first">content</div> 
    <div class="first">content</div> 
    <div class="second">content</div> 
    <div class="third">content</div> 
    <div class="third">content</div> 

</div>

Resultado deseado:

<div class="view-content"> 

    <div class="column"> 
     <div class="first">content</div> 
     <div class="first">content</div> 
    </div> 

    <div class="column"> 
     <div class="second">content</div> 
    </div> 

    <div class="column"> 
     <div class="third">content</div> 
     <div class="third">content</div> 
    </div> 

</div>

Gracias por su ayuda con anticipación!

Fuente

2012-06-05 user1292738

Puede utilizar .wrap() para envolver algo en un div pero si su contenido no se ordena que se convertirá en un lío, he aquí un ejemplo:

entrada

<div class="view-content"> 
    <div class="first">content</div> 
    <div class="second">content</div> 
    <div class="first">content</div> 
</div>

salida

<div class="view-content"> 
    <div class="column"> 
     <div class="first">content</div> 
     <div class="column"> 
      <div class="second">content</div> 
     </div> 
     <div class="first">content</div> 
    </div> 
</div>

Fuente

2012-06-05 11:25:36 slash197

Demohttp://jsfiddle.net/kQz4Z/8/

API: http://api.jquery.com/wrapAll/

Se ha añadido una línea de ruptura para que pueda ver la diferencia aquí :) http://jsfiddle.net/kQz4Z/10/

código

$(function() { 

    $('.first').wrapAll('<div class="column" />') 

    $('.second').wrapAll('<div class="column" />') 

    $('.third').wrapAll('<div class="column" />') 




    alert($('.view-content').html()); 
});

método

Fuente

2012-06-05 11:26:38

Este método dinámicamente: http://jsfiddle.net/kQz4Z/11/ – h2ooooooo

@h2ooooooo aquí va http://jsfiddle.net/ZXb4Y/1/ :)) ¡Agradable! establézcalo como su respuesta, si lo desea, ¡salud! –

Chicos, y ¿qué tal [mina dinámica] (http://stackoverflow.com/a/10896724/1249581)? :) – VisioN

Uso wrapAll()

$(function(){ 
    var classes = ['.first', '.second', '.third']; 

    for (i = 0; i < classes.length; i++) { 
     $(classes[i]).wrapAll('<div class="column">'); 
    } 

});

Demostración: http://jsfiddle.net/g9G85/

Fuente

2012-06-05 11:31:29 charlietfl

O aquí es la solución dinámica muy corto:

$(".view-content > div").each(function() { 
    $(".view-content > ." + this.className).wrapAll("<div class='column' />"); 
});

DEMO:http://jsfiddle.net/CqzWy/

Fuente

2012-06-05 11:45:12 VisioN

Cabe señalar que este método en su forma actual DEBE emplear el selector combinador infantil (>) como se muestra. De lo contrario, se obtendrá un div de ajuste para cada elemento que coincida con un determinado nombre de clase. (Por ejemplo, en este caso, los divs con la clase "tercero" se envolverían en DOS divs con clase "columna"). – Luke

Usted podría intentar pizca esto:

var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get(); 
var results = $.unique(arr); 
var i; 

for(i = 0; i < results.length; i++){ 

    $('.out').append('<div class="columns"></div>'); 
    $('.'+results[i]).clone().appendTo('.columns:last'); 
} 

alert($('.out').html());

Aquí un ejemplo:

JSFIDDLE

Fuente

2012-06-05 13:02:26

jQuery envolver múltiples elementos div en una misma clase

Respuesta

Cuestiones relacionadas