PDA

View Full Version : [jQuery] Inserire div dentro altro div


kwb
30-07-2013, 15:40
Ho questo banale problema in cui devo inserire dei div ( ciascsuno contenente altri elementi ) dentro un altro div.
La struttura HTML è la seguente:

<div class="fuori">Qui ci sono altri sotto-elementi</div>
<div class="dentro">Qui ci sono altri sotto-elementi</div>
<div class="dentro">Qui ci sono altri sotto-elementi</div>
<div class="dentro">Qui ci sono altri sotto-elementi</div>
.
.
.
<div class="dentro">Qui ci sono altri sotto-elementi</div>
<div class="fuori">Qui ci sono altri sotto-elementi</div>

I puntini stanno ad indicare che i div dentro possono essere in numero variabile.

Ciò che voglio ottenere è il seguente:

<div class="fuori">Qui ci sono altri sotto-elementi
<div class="dentro">Qui ci sono altri sotto-elementi</div>
<div class="dentro">Qui ci sono altri sotto-elementi</div>
<div class="dentro">Qui ci sono altri sotto-elementi</div>
.
.
.
<div class="dentro">Qui ci sono altri sotto-elementi</div>
</div>


Quello che ho provato a fare è il seguente:

$("div.fuori").nextUntil("div.fuori").append($('div.dentro'));

Tuttavia non succede nulla e la console non da errori...
:help:

grigor91
30-07-2013, 17:02
In questo caso serve .appendTo() :

<contenutoDaAppendere>.appendTo(<selettore>);

Prova così:

$("div.fuori").nextUntil("div.fuori").appendTo($('div.fuori:first'));
$($('div.fuori')[1]).remove()


L'uso di .append() è:

<selettore>.append(<contenutoDaAppendere>);

kwb
30-07-2013, 17:33
Non funziona. Così mi mette tutti i dentro nel primo fuori.
Io invece voglio che tutti i dentro successivi ad un fuori vengano messi dentro di esso finchè non si incontra un nuovo fuori.

Tra l'altro non capisco perchè dovrei usare appendTo invece di append. Mi pare siano una l'opposto dell'altra ma dal punto di vista implementativo, in questo caso, penso si possano usare entrambi.

Del tuo codice non capisco l'utilità del :first e il [1] .
Da come interpreto io il tuo codice, dovrebbe prendere div.fuori e tutti gli elementi successivi fino al prossimo div.fuori e metterli dentro div.fuori. Poi rimuovere il secondo elemento di ogni div.fuori. :confused:

EDIT: Risolto così

$('div.dentro').each(function(i){
$(this).prev().append($(this));
});

grigor91
30-07-2013, 20:56
Scusa non avevo capito che era una struttura iterata, pensavo ci fossero solo 2 div 'fuori' uno all'inizio e un alla fine.