Pregunta de selector "después" de jQuery

Question

Parece que no puedo encontrar una buena manera de hacerlo, pero parece que debería ser simple. Tengo un elemento al que quiero agregar un div. Luego tengo otro elemento que quiero clonar y meter en ese div intermedio. Esto es lo que esperaba hacer:

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

Esto parece estar cerca, pero no del todo. El problema con esto es que el "append" parece estar operando en el selector original "#somediv> ul". Este tipo de sentido, pero no es lo que quería. ¿Cómo puedo seleccionar de manera más eficiente ese div intermedio que agregué con el "después" y poner mi "#someotherdiv" en él?

Answer 1

Ir al revés y usar insertAfter().

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

Intente agregar los nodos DOM generados al documento solo después de terminar su trabajo.

Una vez que los nodos se agregan al documento mostrado, el navegador comienza a escuchar cualquier cambio para actualizar la vista. Hacer todo el trabajo antes de agregar los nodos al documento mostrado mejora el rendimiento del navegador.

Answer 2

¿Cómo puedo seleccionar de manera más eficiente ese div intermedio que agregué con el "después" y poner mi "#someotherdiv" en él?

@ Vincent's solution es probablemente la forma más rápida de obtener el mismo resultado. Sin embargo, si por alguna razón es necesario añadir el div con after() continuación, tendrá que seleccionarlo y operar sobre ella se puede utilizar

.nextAll([expr])

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

por lo que su js se convierte en:

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

Answer 3

use insertAfter():

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