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

试试这个

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

Answer 2

CSS中的一个child组合子是"greater than"符号，它看起来像这样：

ol > li {
  color: red;
}

表示"select elements that are direct descendants only"。在这种情况下："select list items that are direct descendants of an ordered list"。举例说明：

<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/> 的 children（包括 grandchildren）。

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

而您的第二个 jQuery 选择器正在寻找您的 <li/> 的直接 children（不包括 grandchildren）。

$("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/

Answer 3

试试 find().

技术上 "li.tab > a" 不是 subMenus

的 "child"

$(".tabs").find("li.tab>a").each(function () { console.log(this); });

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

.children() 只会 select 直接 children。所以 subMenus.children("li.tab>a") 会 select 直接 subMenus 的 children 的锚标签，也直接 li.tab 的 children 的标签。

这里可以使用.find()代替：subMenus.find(">li.tab>a").each()

jQuery 中的选择器以不直观的方式工作

Selector in jQuery working in an unintuitive way

javascript

jquery

jquery-selectors