Селектор в jQuery работает неинтуитивно.

Question

У меня есть селектор следующим образом.

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

Он работает как предполагается. Затем я прочитал на website, что также должно работать следующее (и поскольку оно более компактно, я предпочитаю его таким образом).

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

Однако, по-видимому, последнее не находит элементов, поскольку действие в squiglies не выполняется. Что мне не хватает?

Редактировать

Markup по запросу.

<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

Попробуйте находку().

Технически "li.tab > a" не "ребенок" из ПОДМЕНИТ

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

Попробуйте

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

Answer 3

Ребенок комбинатор в 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"); 

Update: Вы хотите использовать .find вместо .children потому

The .children() метод отличается от .find() в этом .children() только перемещается на один уровень вниз по дереву DOM, в то время как .find() может пересекать на несколько уровней, чтобы выбрать элементы-потомки (внуки, и т. Д.).

Источник: https://api.jquery.com/children/

Answer 4

.children() будет выбирать только прямые ребенок. Таким образом, subMenus.children("li.tab>a") будет выбирать теги привязки, которые являются прямыми детьми subMenus, а также прямые дети li.tab.

Здесь Вы можете использовать .find() вместо: subMenus.find(">li.tab>a").each()