jQuery セレクターの質問の「後」

Question

これを行うための良い方法が見つからないようですが、単純であるはずだと思います。divを追加したい要素があります。次に、クローンを作成してその中間 div に押し込みたい別の要素があります。私がやりたかったことは次のとおりです。

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

これは近いように思えますが、まだそこまでではありません。これの問題は、「追加」が元の「#somediv > ul」セレクターで動作しているように見えることです。これは理にかなっていますが、私が望んでいたものではありません。「after」で追加した中間 div を最も効率的に選択し、そこに「#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

「after」で追加した中間 div を最も効率的に選択し、そこに「#someotherdiv」を入れるにはどうすればよいでしょうか?

@Vincentのソリューションは、おそらく同じ結果を得る最も速い方法です。ただし、何らかの理由で 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());