Konrad Viltersten Konrad Viltersten - 18 days ago 6
Javascript Question

Selector in jQuery working in an unintuitive way

I have a selector as follows.

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


It works as supposed to. Then, I read on the website that the following is also supposed to work (and since it's more compact, I prefer it that way).

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


However, the latter seems not to find any elements as the action in the squiglies doesn't execute. What am I missing?

Edit

Markup as requested.

<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

Try find().

Technically "li.tab > a" is not a "child" of subMenus

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