JQuery селектор, чтобы найти дочерний элемент с

Question

В течение часа гуглил и пробовал с ошибками, пытаясь придумать селектор jquery для доступа к одному из нескольких элементов меток в расширяемом дереве. HTML либо так:

<span id="ppown" class="treeTitleSpan" role="leaf">PPO</span> 
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />

Или вот так:

<span id="ppw" class="treeTitleSpan" role="leaf">Other</span> 
<span class="handle closed"></span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />

И я начинаю с диапазона .treeTitleSpan в каждом случае (в обработчике кликов). Я знаю, что могу получить доступ к одному с:

$(this).next().next().children('.nodeCheckIcon');

А другой с:

$(this).next().children('.nodeCheckIcon');

Но я бы хотел один селектор, который будет работать в обоих случаях, «find» не работает:

$(this).find('.nodeCheckIcon:first')

Любая помощь будет оценена.

рик

Answer 1

Поскольку this указывает на элемент span, который является родным братом родителя label, $(this).find('.nodeCheckIcon:first') не будет работать.Я не знаю о вашей полной структуре разметки, но если у вас есть контейнер для обёртывания для этого элемента span, вы можете попробовать это

$(this).parent().find('.nodeCheckIcon:first');

Answer 2

Как насчет этого:

$(this).nextAll('.treeCheckBoxLabel:first').children('.nodeCheckIcon');

Использование :first гарантирует, что вы выберете не более одного .treeCheckBoxLabel, что может быть или не быть проблемой в зависимости от остальной части вашего HTML.

Answer 3

Альтернатива другим постам (много способов обшить кошку :))

$(this).siblings(".treeCheckBoxLabel:has(label.nodeCheckIcon):first")

Answer 4

$(this).nextAll('.treeCheckBoxLabel').children('.nodeCheckIcon');

Или, если у вас может быть несколько ярлыков, например:

<span id="ppw" class="treeTitleSpan" role="leaf">Other</span> 
<span class="handle closed"></span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />
</span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />
</span>

И вам нужен только первый:

$(this).nextAll('.treeCheckBoxLabel').first().children('.nodeCheckIcon');