pergunta do seletor “depois” do jQuery

Question

Não consigo descobrir uma boa maneira de fazer isso, mas parece que deveria ser simples.Eu tenho um elemento ao qual desejo anexar uma div.Então eu tenho outro elemento que quero clonar e colocar naquela div intermediária.Aqui está o que eu esperava fazer:

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

Isso parece estar próximo, mas não exatamente lá.O problema com isso é que o "append" parece estar operando no seletor "#somediv> ul" original.Isso faz sentido, mas não é o que eu queria.Como posso selecionar com mais eficiência aquele div intermediário que adicionei com o "depois" e colocar meu "#someotherdiv" nele?

Answer 1

Faça o contrário e use insertAfter().

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

Tente adicionar os nós DOM gerados ao documento somente após terminar seu trabalho.

Depois que os nós são adicionados ao documento exibido, o navegador começa a ouvir qualquer alteração para atualizar a visualização.Fazer todo o trabalho antes de adicionar os nós ao documento exibido melhora o desempenho do navegador.

Answer 2

use insertAfter():

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

Answer 3

Como posso selecionar com mais eficiência aquele div intermediário que adicionei com o "depois" e colocar meu "#someotherdiv" nele?

A solução do @Vincent é provavelmente a maneira mais rápida de obter o mesmo resultado.No entanto, se por algum motivo você precisar adicionar o div com after() então precisa selecioná-lo e operá-lo, você pode usar

.nextAll( [expr] )

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

Então seu js se torna:

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