类选择器中的 jQuery 类答案

【问题标题】：jQuery class within class selector类选择器中的 jQuery 类
【发布时间】：2011-04-15 14:45:19
【问题描述】：

<div class="outer">
     <div class="inner"></div>
</div>

如何在这里找到内部 div？

$container.find('.outer .inner')

只是要寻找带有class="outer inner" 的div，对吗？

所以我尝试了

$container.find('.outer > .inner')

但这似乎不起作用。

编辑：

我知道用类似的东西很容易找到

$container.find('.outer').find('.inner')

但我正在寻找一种读起来更好的单一选择器语法。

【问题讨论】：

$container 是如何定义的？除此之外，应尽可能使用单个选择器。如果您不必到处搜索不同的选择器部分，则阅读起来会更容易。
“但我正在寻找那种读起来更好的单一选择器语法。”您应该更喜欢.find(...) 方式，因为选择器越复杂，或者如果您使用浏览器不支持的选择器，它会更快。在这种情况下，sizzle 将用于选择，与 .find(...) 的拆分选择器相比，它/可能非常慢。

【解决方案1】：

对于这个 html：

<div class="outer">
     <div class="inner"></div>
</div>

这个选择器应该可以工作：

$('.outer > .inner')

【讨论】：

【解决方案2】：

只是要寻找一个 class="outer inner" 的 div，对吗？

不，'.outer .inner' 将查找所有具有 .inner 类的元素，这些元素也具有具有 .outer 类的元素作为祖先。 '.outer.inner'（没有空格）会给出你想要的结果。

'.outer > .inner' 将为具有 .inner 类的元素查找具有 .outer 类的元素的直接子元素。

'.outer .inner' 和 '.outer > .inner' 都应该适用于您的示例，尽管选择器根本不同，您应该注意这一点。

【讨论】：