ближайший узел предка в jQuery

Question

В своем опыте работы с 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;
}

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

Answer 1

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

---

да - родители () пересекают дерево.

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

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

Answer 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 ]

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

Answer 3

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

Answer 4

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