Используйте jQuery, чтобы рекурсивно получить первый родительский элемент, соответствующий фильтру классов

Question

У меня есть ситуация, в которой мне нужна ссылка на следующий DIV, который является родителем моего текущего DIV, но соответствует определенному имени класса.

<div class="container">
    <div class="something">test</div>
    <div class="something">test</div>
    <div class="something" onclick="$(use jquery to find parent with class container)">test</div>
</div>

Это было бы довольно легко, но также может выглядеть так:

<div class="container">
    <div class="someotherthing">
        <div class="something">test</div>
        <div class="something">test</div>
        <div class="something" onclick="$(use jquery to find parent with class container)">test</div>
    </div>
</div>

Это означает, что я ищу решение, которое рекурсивно обходит дом, пока не найдет родителя данного элемента, который соответствует определенному классу CSS.

И мне было интересно, может ли jQuery сделать это за один раз.

Answer 1

Метод .closest() должен обрабатывать это:

 $(this).closest(".someclass")

Answer 2

Взгляните на jQuery ближайший метод, который получает первый элемент, соответствующий селектору, начиная с текущего элемента и продвигаясь вверх по дереву DOM.

Answer 3

$('.something').parents('.container');

Answer 4

Вы можете использовать .parents([selector]) для выбора нужного родителя любого элемента:

$('.something').on('click', function () {
    var $parent = $(this).parents('.container:first');
});

Это выберет первый родительский элемент, который имеет класс container при щелчке любого элемента с классом something.

Обратите внимание, что .on() является предпочтительной версией jQuery 1.7 функции .bind().

Документы для .parents(): http://api.jquery.com/parents

Answer 5

$('.something').parents('.container');

Это будет делать то, что вы хотите.

Вы должны проверить документацию по обходу DOM .