Обход DOM с помощью jQuery .closest ()

Question

То, что я думал, было бы легко для .closest() справиться, оказалось, что это не так (или, возможно, я делаю глупую ошибку).

Я пытаюсь получить доступ к элементу <label> из <div> с внутренним текстом: I AM HERE:

<li>
    <label>I WANT TO ACCESS THIS ELEMENT</label>
    <div>...</div>
    <div>
        <input/>
        <input/>
        <input/>
        <div id="start">I AM HERE</div>
    </div>
</li>

Моим первым предположением было бы попробовать это:

$('#start').closest('label') 

Но это ничего не возвращает.

Answer 1

.closest() ищет только элементы-предки для первоначального выбора.Вам нужна комбинация .closest() и .siblings() или .children():

//find closest parent `<li>` element and then find that element's child `<label>` element
$('#start').closest('li').children('label');

//find the closest parent `<div>` element and then find that element's sibling `<label>` element
$('#start').closest('div').siblings('label');

Обновление

Очень быстрый селектор будет использовать .prev() дважды и .parent() какэто:

$('#start').parent().prev().prev();

Answer 2

.closest находит только родителей выбранных элементов.Попробуйте это:

$("#start").closest("li").children("label");

Обновление

изменено на .children, селектор "> label" устарел.

Answer 3

Ближайший начинается с текущего элемента и продвигается вверх по дереву DOM, но, поскольку <label> не является родительским элементом вашего текущего элемента, вам нужно будет использовать 2 поиска:

 $('#start').closest('li').children('label');

Это будет ваш самый эффективный обход.

Answer 4

Я знаю, что это старый, но вот самый быстрый способ ...

$('#start').closest('li').find('label');

find() использует собственные методы браузера, children() использует JavaScript, интерпретируемый браузером