在jQuery中查找父级下面的控件 - 这是最干净的方法吗？

Question

如果我想在页面上找到一个元素，我会使用$（'＃Foo'）;

现在，我有一个场景，我的'this'上下文是一个jQuery元素。我想在'this'下找到一个元素。

我正在使用：

$(this).find('#Foo');

我只是想确保没有更清晰的表达方式。如果我不在我的上下文中，我可能会使用类似$（'＃this #Foo'）的东西。当我明确引用'this'jQuery元素时，我的jQuery选择器查询变得更长，这似乎令人惊讶。

Answer 1

首先，因为元素ID对于文档是唯一的，所以你不需要在另一个元素的上下文中找到它。但是为了一个很好的语法，我喜欢

$（'。foo'，this）将找到所有类别为“foo”的孩子

Answer 2

.children()比.find()快。

$(this).children('#Foo');

<强>解释

原因是，.children()仅查看节点的直接子节点，而.find()遍历节点下方的整个DOM，因此 .children()应该更快给出等效的实现。 find使用本机浏览器方法，而children使用在浏览器中解释的JavaScript。在我的实验中，典型案例的性能差异不大。

<强>参考

1. What is fastest children() or find() in jQuery?
2. Traversing .children()
3. Traversing .find()

Answer 3

ID应该是唯一的，因此在jQuery中选择#Foo的最快方法就是

$('#Foo')

要回答您的问题，.children()方法在大多数浏览器中都比.find()快，只要您处理直接后代，它的工作方式就相同。

$(this).children('#Foo')

我整理了JSPerf来证明这一点。请记住，在大多数情况下，性能差异可以忽略不计。

Answer 4

如果您按ID找到元素，则不需要预先选择$（this）。元素ID应该是唯一的。没有两个元素应该具有相同的id。也就是说，如果你选择其他东西，比如上课，你需要使用$（this）.find（“。myclass”）来选择子元素。