Question

我经常为频繁重用的DOM元素创建变量，如下所示：

var $dom_element = $('#dom_element);

这是我的设置：

<div id="dom_element">
  <div class="child_element">
  <div class="child_element">
</div>

我想知道的是，如果我可以将此变量与子选择器混合以获取子元素。我猜它会是这样的：

var $child_element = $($dom_element + ' .child_element);

如果是这样的话，这样做有什么速度上的好处，而不仅仅是说：

$('.child_element);

考虑到这两个元素可能都嵌套在一个大型网站中这一事实？

Answer 1

使用

var $dom_element = $('#dom_element);

我会使用以下内容来获取子元素

var $child_element = $dom_element.find(".child_element");//I prefer this one, it is easier to read.

或

var $child_element = $(".child_element", $dom_element);

从我的研究/阅读中，如果要多次引用它，似乎将元素设置为变量是最佳的。这样jQuery就不必多次搜索DOM了。

Answer 2

关于你的选择器，你可以在使用裸类作为子选择器时遇到麻烦。如果您有多个子节点使用同一个类怎么办？

正如其他人所建议的那样，

.find（）有效。您也可以使用.children（）：

var $kids = $dom_element.children('.child_element');

.find（）和.children（）之间的区别在于.children（）只会在DOM树中查找一个级别。 .find（）将以递归方式遍历所有可能的子节点以匹配您的选择器。