jquery domanda "dopo" selettore

Question

Non riesco a capire un buon modo per farlo, ma sembra che dovrebbe essere semplice. Ho un elemento a cui voglio aggiungere un div. Poi ho un altro elemento che voglio clonare e inserire in quel div intermedio. Ecco cosa speravo di fare:

$("#somediv > ul").after("<div id='xxx'></div>").append($("#someotherdiv").clone()); 

Questo sembra essere vicino, ma non proprio lì. Il problema è che "append" sembra funzionare sul selettore "#somediv> ul" originale. Questo tipo di ha senso, ma non è quello che volevo. Come posso selezionare in modo più efficace il div intermedio che ho aggiunto con il "dopo" e inserire il mio "#someotherdiv" in esso?

Answer 1

Andare al contrario e utilizzare insertAfter().

Provare ad aggiungere i nodi DOM generati al documento solo dopo aver terminato il lavoro.

Una volta aggiunti i nodi al documento visualizzato, il browser inizia ad ascoltare le modifiche per aggiornare la vista. Fare tutto il lavoro prima di aggiungere i nodi al documento visualizzato migliora le prestazioni del browser.

Answer 2

Come posso selezionare in modo più efficiente che div intermedia che ho aggiunto con il "dopo" e mettere il mio "#someotherdiv" in esso?

@ La soluzione di Vincent è probabilmente il modo più veloce per ottenere lo stesso risultato. Tuttavia, se per qualsiasi motivo è necessario aggiungere il div con after() quindi necessario selezionarlo e operare su di esso è possibile utilizzare

.nextAll([expr])

Find all sibling elements after the current element.
Use an optional expression to filter the matched set.

così il vostro js diventa:

$("#somediv > ul") 
    .after("<div id='xxx'></div>") 
    .nextAll('#xxx') 
    .append($("#someotherdiv").clone()); 

Answer 3

utilizzare insertAfter():

$("<div id='xxx'></div>").insertAfter("#somediv > ul").append($("#someotherdiv").clone())