jQuery Come avvolgere intorno div multipla degli stessi elementi di classe

che sto cercando di avvolgere più div stessa classe in un div e per saltare div non con la stessa classe. .wrap non li combina, e .wrapAll lancia le div non classificate sottostanti. Ho cercato di creare una soluzione alternativa, ma senza risultati.jQuery Come avvolgere intorno div multipla degli stessi elementi di classe

originale

<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...

Ricercato Risultato

<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>

fonte

2010-07-25 Nathan Alette

uguale al mediatore. La funzione che si sta tentando di utilizzare non può "indovinare" che cosa si vuole fare, altrimenti ci sarebbe troppo in testa e renderebbe impossibile la funzione –

Sono d'accordo, JavaScript non dovrebbero essere utilizzati per rendere tali cambiamenti drastici. Tuttavia, il software che sto usando non ti permette di modificare le modifiche al setup, quindi sono bloccato con jQuery. –

È possibile effettuare il ciclo abbastanza rapidamente attraverso i vostri <div> elementi utilizzando un ciclo for. Nel codice seguente, basta cambiare il selettore iniziale qui per afferrare tutti i div fratelli, ad es. #content > div.entry o ovunque si trovino:

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. Stiamo eseguendo il looping degli elementi .entry utilizzando .nextUntil() per ottenere tutti gli elementi .entry fino a quando non è disponibile uno .entry utilizzando :not() selector. Quindi stiamo prendendo quegli elementi successivi, oltre a quello che abbiamo iniziato con (.andSelf()) e facendo un .wrapAll() su quel gruppo. Dopo che sono stati completati, stiamo saltando avanti o tanti elementi nel ciclo.

fonte

2010-07-25 12:58:07

Grazie mille, ha funzionato perfettamente. –

Molto elegante. Ben fatto. – Adam

Ho appena montata su un semplice 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); 
}

fonte

2010-07-25 09:31:32 Adam

Si potrebbe in alternativa aggiungere nuove div al markup, e poi aggiungere il contenuto che si desidera avvolto in quelle.

Se il markup è questo:

<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>

utilizzare la seguente per aggiungere due nuovi div (column-one e column-two) e quindi aggiungere il contenuto appropriato in quelle div:

// 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 qui: http://codepen.io/zgreen/pen/FKvLH

fonte

2014-04-30 15:14:31 zgreen

jQuery Come avvolgere intorno div multipla degli stessi elementi di classe

risposta

Problemi correlati