Jquery子元素选择器解释

Question

我有这段标记。

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

当我使用jQuery选择子元素时，有两种方法：

$("#parent .child")

而且

$("#parent").find(".child")

有人能解释一下这两个选择器的区别，以及哪个更好吗？

- user5423386

---

它们都是相同的。没有“更好”的版本，只有适合您需求的版本。前者在您知道父选择器和子选择器时起作用。后者在您已经将父级缓存到对象中时起作用。 - Rory McCrossan

在大多数情况下，最好使用 $("#parent").find(".child")，因为您很可能需要再次使用 $("#parent") 选择器，并且可以将其存储在变量中。 - misantronic

这可能有点挑剔，但那实际上是一个后代选择器，find() 也匹配后代而不仅仅是子元素。 - Frédéric Hamidi

@Frédéric Hamidi，它们都匹配后代。 - misantronic

@misantronic，是的，那就是我说的。也许我的评论不够清晰。 - Frédéric Hamidi

Answer 1

$("#parent .child") 和 $("#parent").find(".child") 是相同的。两者都会递归选择所有具有类名为 child 的子元素。也就是说，它将返回任何级别的子元素。

如果您使用 $("#parent > .child")，它将仅返回第一级子元素。这个选择器与 $("#parent").children(".child") 相同。

- Anoop Joshi P

Answer 2

这两个选择器之间没有任何区别。 $("#parent .child") 和 $("#parent").find(".child") 都会返回相同的结果（在您的示例中，都是 parent id 内带有 child 类名的 div 元素）。

- James Monger