Ближайший предка node в jQuery

В моем опыте javascript я обнаружил, что это очень распространенная задача: "Поиск ближайшего предка элемента с некоторым условием (имя тега, класс,...)". Может ли метод jQuery parent() выполнять эту работу? Порядок возвращаемых элементов родителей() предсказуем? Является ли сверху или снизу вверх? На данный момент я использую эту служебную функцию:

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

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

ОТВЕТЫ

Ответ 1

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

yep - parent() пересекает дерево.

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

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

Ответ 2

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

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 возвращает] набор элементы, содержащие ближайший родитель элемент, который соответствует указанному селектор, стартовый элемент включен.

Ответ 3

Вы должны использовать 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>

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

Ответ 4

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