Question

我有一个选择器如下。

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

它的作用应该如此。然后，我在website上读到以下内容也应该起作用（因为它更紧凑，我更喜欢它）。

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

然而，后者似乎没有找到任何元素，因为在squiglies中的动作不会执行。我错过了什么？

修改

按要求标记。

<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中的子组合器是＆＃34;大于＆＃34;符号，它看起来像这样：

ol > li {
  color: red;
}

这意味着＆＃34;选择仅直接后代的元素＆＃34;。在这种情况下：＆＃34;选择作为有序列表的直接后代的列表项＆＃34;。举例说明：

<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>

尝试删除＆gt;符号

$("li.tab a");

第一个jQuery选择器正在寻找<li/>（包括孙子）的孩子。

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

而你的第二个jQuery选择器正在寻找你<li/>的直接孩子（不包括孙子）。

$("li.tab > a");

<强>更新你想要使用.find而不是.children，因为

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

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

Answer 2

尝试 find（）。

技术上"li.tab > a"不是＆＃34; subMenus

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

subMenus.children("li.tab>a")只会选择直接子女。因此，subMenus会选择li.tab的直接子项的锚标记，并指导.find()的子项。

您可以在此使用subMenus.find(">li.tab>a").each()代替<li className={ this.routeActive(['dashboard']) ? 'active' : '' }> <Link className="nav-item" to="/dashboard" title="Dashboard"> <em className="icon-speedometer" aria-hidden="true"></em> <span data-localize="sidebar.nav.SINGLEVIEW"><Translate value="dashboard"/></span> </Link> </li> <li className={ this.routeActive(['products', 'products/new', 'customers', 'products/groups', 'products/categories', 'agents', 'vendors', 'paymentTerms', 'priceLevel']) ? 'active' : '' }> <div className="nav-item" onClick={ this.toggleItemCollapse.bind(this, 'generalInformation') }> <div className="pull-right label label-info">1</div> <em className="icon-book-open"></em> <span data-localize="sidebar.nav.MENU"><large><Translate value="general_information"/></large></span> </div> <Collapse in={ this.state.collapse.generalInformation } timeout={ 100 }> <ul id="products" className="nav sidebar-subnav"> <li className="sidebar-subnav-header"><Translate value="general_information"/></li> <li className={ this.routeActive('products') ? 'active' : '' }> <Link to="/products" title="Products"> <span data-localize="sidebar.nav.PRODUCTS"><Translate value="product_management"/></span> </Link> </li>

Answer 4

试试这个

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

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

4 个答案: