JQuery "после" вопроса селектора

Question

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

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

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

Answer 1

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

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

Попробуйте добавить созданные вами DOM-узлы в документ только после окончания работы.

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

Answer 2

использовать insertAfter ():

$("<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.<br> Use an optional expression to filter the matched set.

Таким образом, ваш JS становится:

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