jQuery “dopo” domanda di selezione

Question

Io non riesco a capire un buon modo per fare questo, ma sembra che dovrebbe essere semplice.Ho un elemento che voglio aggiungere un div per.Poi ho un altro elemento che voglio clonare e spingere in quella intermedia div.Ecco quello che speravo di fare:

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

Questo sembra essere vicino, ma non abbastanza c'.Il problema con questo è che il "append" sembra essere operativo originale "#somediv > ul" selettore.Questa sorta di senso, ma non è quello che volevo.Come posso più selezionare in modo efficiente intermedia div che ho aggiunto con il "dopo" e mettere il mio "#someotherdiv" in esso?

Answer 1

Andare in un altro modo e utilizzare insertAfter().

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

Tenta di aggiungere il tuo generato DOM nodi al documento solo dopo aver terminato il vostro lavoro.

Una volta che i nodi vengono aggiunti al documento visualizzato, il browser si avvia l'ascolto di un qualsiasi modifica per aggiornare la visualizzazione.Facendo tutto il lavoro prima di aggiungere nodi al documento visualizzato migliorare le prestazioni del browser.

Answer 2

utilizzare insertAfter():

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

Answer 3

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

@Vincent soluzione è probabilmente il modo più veloce per ottenere lo stesso risultato.Tuttavia, se per qualsiasi motivo avete bisogno di aggiungere un div con after() poi è necessario selezionare 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());