jQuery Cómo envolver div alrededor de varios elementos de la misma clase

Estoy intentando envolver varios divs de la misma clase en un div y omitir divs que no pertenecen a la misma clase. .wrap no los combina, y .wrapTodos arroja los divs no clasificados debajo. He estado jugando con los intentos de crear una solución alternativa, pero sin resultado.jQuery Cómo envolver div alrededor de varios elementos de la misma clase

original

<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div>Skip in wrap</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 

continued...

resultado deseado

<div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
</div> 
<div>Skip in wrap</div> 
<div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
</div>

Fuente

2010-07-25 Nathan Alette

lo mismo que meder. La función que está tratando de usar no puede "adivinar" lo que quiere hacer, de lo contrario habría demasiada sobrecarga y la función sería impracticable. –

Acepto, javascript no debe utilizarse para realizar cambios tan drásticos. Sin embargo, el software que estoy usando no le permite editar ningún cambio en la configuración, así que estoy atascado con jQuery. –

Puede recorrer muy rápidamente a través de sus elementos <div> utilizando un bucle for. En el siguiente código, simplemente cambie el selector inicial aquí para tomar todos los hermanos divs, p. #content > div.entry o dondequiera que estén:

var divs = $("div.entry"); 
for(var i=0; i<divs.length;) { 
    i += divs.eq(i).nextUntil(':not(.entry)').andSelf().wrapAll('<div />').length; 
}

You can give it a try here. Estamos simplemente pasando por los elementos .entry<div> utilizando .nextUntil() para obtener todos los elementos .entry hasta que haya un .entry que no sea .entry utilizando el :not() selector. Luego tomamos los siguientes elementos, más el que comenzamos con (.andSelf()) y haciendo un .wrapAll() en ese grupo. Después de que están envueltos, estamos saltando muchos elementos en el ciclo.

Fuente

2010-07-25 12:58:07

Muchas gracias, funcionó perfectamente. –

Muy elegante. Bien hecho. – Adam

acabo prepararon rápidamente un simple custom solution.

var i, wrap, wrap_number = 0; 
$('div').each(function(){ //group entries into blocks "entry_wrap_#" 
    var div = $(this); 
    if (div.is('.entry')) { 
     wrap = 'entry_wrap_' + wrap_number; 
     div.addClass(wrap); 
    } else { 
     wrap_number++; 
    } 
}); 
for (i = 0; i <= wrap_number; i++) { //wrap all blocks and remove class 
    wrap = 'entry_wrap_' + i; 
    $('.' + wrap).wrapAll('<div class="wrap"/>').removeClass(wrap); 
}

Fuente

2010-07-25 09:31:32 Adam

Como alternativa, puede agregar nuevos divs a su marcado, y luego agregar el contenido que desee envolver en los mismos.

Si su margen de beneficio es la siguiente:

<div class="wrap"> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
</div>

Utilice la siguiente para añadir dos nuevos divs (column-one y column-two) y luego añadir el contenido adecuado en esos divs:

// Set vars for column content 
var colOne = $('.col-1').nextUntil('.col-2').addBack(); 
var colTwo = $('.col-2').nextAll().addBack(); 

// Append new divs that will take the column content 
$('.wrap').append('<div class="column-first group" /><div class="column-second ground" />'); 

// Append column content to new divs 
$(colOne).appendTo('.column-first'); 
$(colTwo).appendTo('.column-second');

demo aquí: http://codepen.io/zgreen/pen/FKvLH

Fuente

2014-04-30 15:14:31 zgreen

jQuery Cómo envolver div alrededor de varios elementos de la misma clase

Respuesta

Cuestiones relacionadas