javascript - jQuery 中的选择器以一种不直观的方式工作

Question

我有一个选择器，如下所示。

subMenus.children("li.tab").children("a").each(function () { ... }

它按预期工作。然后，我读到website以下内容也应该有效(因为它更紧凑，我更喜欢这种方式)。

subMenus.children("li.tab>a").each(function () { ... }

但是，后者似乎找不到任何元素，因为波形图中的操作未执行。我错过了什么？

编辑

按要求进行标记。

<ul id="submenu1" class="tabs tabs-transparent">
  <li class="tab"><a href="#">A</a></li>
  <li class="tab"><a href="#">B</a></li>
</ul>
<ul id="submenu2" class="tabs tabs-transparent">
  <li class="tab"><a href="#">A</a></li>
  <li class="tab"><a href="#">B</a></li>
</ul>
<ul id="submenu3" class="tabs tabs-transparent">
  <li class="tab"><a href="#">A</a></li>
  <li class="tab"><a href="#">B</a></li>
</ul>

Answer 1

CSS 中的子组合器是“大于”符号，它看起来像这样:

ol > li {
  color: red;
}

它的意思是“仅选择直接后代的元素”。在本例中:“选择作为有序列表的直接后代的列表项”。举例说明:

<ol>
  <li>WILL be selected</li>
  <li>WILL be selected</li>
  <ul>
     <li>Will NOT be selected</li>
     <li>Will NOT be selected</li>
  </ul>
  <li>WILL be selected</li>
</ol>

尝试删除 > 符号。

$("li.tab a");

第一个 jQuery 选择器正在寻找 <li/> 的子元素(包括孙子)。

$("li.tab").children("a");

而您的第二个 jQuery 选择器正在寻找 <li/> 的直接子级(不包括孙子)。

$("li.tab > a");

更新:您需要使用 .find 而不是 .children 因为

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

来源:https://api.jquery.com/children/