jQuery"之后"选择器问题

时间:2020-03-05 18:50:57  来源:igfitidea点击:

我似乎无法找到一种执行此操作的好方法,但似乎应该很简单。我有一个元素要添加div。然后,我还有另一个要克隆并推入该中间div的元素。这是我希望做的:

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

这似乎很接近,但还不完全到此为止。问题在于," append"似乎在原始的" #somediv> ul"选择器上运行。这种说法很有意义,但这不是我想要的。如何最有效地选择添加有" after"的中间div并将其放入" #someotherdiv"?

解决方案

回答

How can I most efficiently select that intermediate div that I added with the "after" and put my "#someotherdiv" into it?

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

回答

使用insertAfter():

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

回答

反过来说,使用insertAfter()

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

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

将节点添加到显示的文档后,浏览器将开始侦听任何更改以刷新视图。在将节点添加到显示的文档之前进行所有工作确实可以提高浏览器性能。