jquery - 如何使用 JQuery“后”选择器

Question

我似乎无法找到一个好的方法来做到这一点，但它似乎应该很简单。我有一个我想要的元素append a div。然后我有另一个元素，我想克隆并推入该中间 div。这是我希望做的：

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

这似乎很接近，但并不完全在那里。问题在于“附加”似乎在原始#somediv > ul选择器上运行。这有点道理，但这不是我想要的。如何最有效地选择我添加的中间 div 并将其after放入#someotherdiv其中？

score 9 · Accepted Answer

反过来使用insertAfter().

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

仅在完成工作后尝试将生成的 DOM 节点添加到文档中。

一旦将节点添加到显示的文档中，浏览器就会开始监听任何更改以刷新视图。在将节点添加到显示的文档之前完成所有工作确实可以提高浏览器性能。

score 5 · Accepted Answer

使用插入后（）：

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

score 0 · Accepted Answer

我怎样才能最有效地选择我用“之后”添加的中间 div 并将我的“#someotherdiv”放入其中？

@Vincent 的解决方案可能是获得相同结果的最快方法。但是，如果出于某种原因您需要添加 divafter()然后需要选择它并对其进行操作，您可以使用

.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());

3 回答 3