before - jQuery pregunta de selector "después"

before javascript

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

use insertAfter ():

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

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?

La solución de @ Vincent es probablemente la forma más rápida de obtener el mismo resultado. Sin embargo, si por alguna razón necesita agregar el div con after() luego necesita seleccionarlo y operarlo, puede usar

.nextAll( [expr] )

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

Entonces tu js se convierte en:

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

Answer 3

Vaya al revés y use 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.