В моем опыте 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;
}
Может ли кто-нибудь сказать мне, есть ли умный способ выполнить эту работу?
Изменить. Начиная с 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.
Добавление в @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 возвращает] набор элементы, содержащие ближайший родитель элемент, который соответствует указанному селектор, стартовый элемент включен.
Вы должны использовать 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).
ближайший() начинается с текущего элемента, если родительский объект, который вы ищете, имеет тот же тег, что и текущий (например, оба являются div), используйте parent(). closeest()