ближайший родительский узел в jQuery

StackOverflow https://stackoverflow.com/questions/201314

  •  03-07-2019
  •  | 
  •  

Вопрос

По моему опыту работы с JavaScript я обнаружил, что это очень распространенная задача «поиск ближайшего предка элемента с некоторым условием (имя тега, класс,...)».Может ли метод родителей () jquery выполнить эту работу?Порядок возвращаемых элементов родителей() предсказуем?Это сверху вниз или снизу вверх?На данный момент я использую эту служебную функцию:

function ancestor(elem, selector) {
  var $elem = $( elem ).parent();
  while( $elem.size() > 0 ) {
    if( $elem.is( selector ) ) 
    return $elem;
    else
       $elem = $elem.parent();
  }
  return null;
}

Может кто-нибудь сказать мне, есть ли умный способ выполнить эту работу?

Это было полезно?

Решение

Редактировать:Начиная с jQuery 1.3, это было встроено как closest() функция.например: $('#foo').closest('.bar');

да,parents() перемещается вверх по дереву.

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

$('#d').parents("div:first"); выберет div b.

Другие советы

Добавление в @никфответ:

jQuery 1.3 упростил эту задачу благодаря closest.

Учитывая DOM:

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

Ты можешь сделать:

$('#d').closest("div"); // returns [ div#b ]

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

Вы должны использовать closest, потому что parents не даст вам ожидаемого результата, если вы работаете с несколькими элементами.Например, предположим, что у вас есть это:

    <div id="0">
        <div id="1">test with <b>nested</b> divs.</div>
        <div id="2">another div.</div>
        <div id="3">yet <b>another</b> div.</div>
    </div>

и вы хотите добавить класс к элементам div, имеющим <b> элемент как их непосредственный дочерний элемент (т. е. 1 и 3).Если вы используете $('b').parents('div'), вы получаете div 0, 1 и 3.Если вы используете $('b').parents('div:first'), вы получаете только div 1.Чтобы получить 1 и 3, но не 0, вам нужно использовать $('b').closest(elem).

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top