javascript - jquery - 将引用 dom 元素的变量与选择器混合

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

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

score 4 · Accepted Answer

和

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。

score 0 · Accepted Answer

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

.find() 正如其他人所建议的那样有效。您也可以使用 .children()：

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

.find() 和 .children() 之间的区别在于 .children() 只会在 DOM 树的下一级查找。.find() 将递归地遍历所有可能的子节点以匹配您的选择器。

2 回答 2