如何使用 JQuery“后”选择器答案

【问题标题】：How to use JQuery "after" selector如何使用 JQuery“后”选择器
【发布时间】：2010-09-08 11:11:21
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

反过来使用insertAfter()。

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

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

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

【讨论】：

【解决方案2】：

使用 insertAfter()：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：