Вопрос выбора jQuery «после»

Question

Кажется, я не могу найти хороший способ сделать это, но кажется, что это должно быть просто.У меня есть элемент, к которому я хочу добавить div.Затем у меня есть еще один элемент, который я хочу клонировать и поместить в этот промежуточный элемент div.Вот что я надеялся сделать:

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

Кажется, это близко, но не совсем там.Проблема в том, что «добавление», похоже, работает с исходным селектором «#somediv > ul».В этом есть смысл, но это не то, чего я хотел.Как мне наиболее эффективно выбрать тот промежуточный div, который я добавил с помощью «after», и поместить в него свой «#someotherdiv»?

Answer 1

Пойдите наоборот и используйте insertAfter().

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

Старайтесь добавлять сгенерированные узлы DOM в документ только после завершения работы.

После добавления узлов в отображаемый документ браузер начинает прослушивать любые изменения, чтобы обновить представление.Выполнение всей работы перед добавлением узлов в отображаемый документ повышает производительность браузера.

Answer 2

используйте вставкуПосле():

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

Answer 3

Как мне наиболее эффективно выбрать тот промежуточный div, который я добавил с помощью «after», и поместить в него свой «#someotherdiv»?

Решение @ Винсента, вероятно, самый быстрый способ получить тот же результат.Однако, если по какой-либо причине вам нужно добавить div с помощью after() затем нужно выбрать его и работать с ним, вы можете использовать

.nextAll( [expr] )

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

Итак, ваш js становится:

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