Записки Вредного программиста

enjoy, motherfuckers ;)

Общие заблуждения о jQuery (часть 1) Parent, Parents, Closest

Быстрый рост JavaScript библиотек и разнообразных фреймворков, таких как jQuery, для программирования на стороне клиента, предоставил всю мощь языка JavaScript для широкой аудитории. jQuery предоставляет свой собственный API, методы и синтаксические особенности. Порой которые похожи друг на друга, но отличающиеся в чем-то. Это заметка должна избавить вас от путаницы

.parent(), .parents() .closest()

Все три эти метода предоставляют доступ вверх над элементами по дереву DOM, но они тем временем все-таки отличаются

parent(selector)

Попросту находит одного непосредственного родителя для элемента или элементов. Он также может принимать селектор в виде параметра, который будет полезен для нахождения родителя в определенном контексте.

1
2

$('span.my').parent().css('border', '1px solid red');
$('p').parent('div.sidebar').css('border', '1px solid red');

В первой строке мы получаем родителя с классом my. Во второй же получает родителей для всех элементов

, при условии, что родитель его

с классом .sidebar.

Возможность ограничить выборку метода как во второй строке в примере выше – стандартная “плюшка” jQuery. Большинство методов для DOM-манипуляций позволяют указать селектор.

parents(selector)

Работает по тому же принципу, что и .parent() за исключением того, что данный метод не ограничен одним уровнем и может возвращать несколько предков. К примеру:

1

$('li.naivgation').parents('li');

Для каждого элемента

  • который содержит в себе класс navigation, возвращает всех родителей и предков, который в свою очередь тоже элементы списка
  • . Данный метод может быть полезен с многоуровнемым меню.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <ul class="navigation">
  <li>Catalog
     <ul>
        <li>Electronics</li>
        <li>Animals</li>
        <li>Birds</li>
     </ul>
  </li>
  <li>About...
     <ul>
        <li>me</li>
        <li>company</li>
     </ul>
  </li>
</ul>

    Допустим нам нужно поменять цвет фона только для третьего уровня вложенности:

    1
2
3
4

    $('.navigation li').each(function() {
  if (2 == $(this).parents('.navigation li').length)
     $(this).css('background-color', 'cyan');
});

    Для каждого элемента

  • , найденного в классе navigation находим количество
  • -предков. Если это два, значит раскрашиваем его.

    closest(selector)

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

    1
2
3
4

    if (1 == $('.elem1').closest('.elem2').length)
  console.log('Непосредственный предок');
else
  console.log('Дальний родственник :)');

    Метод .closest() легко сэмулировать методом .parents(), ограничив количество возвращаемых элементов:

    1

    $($('.elem1').parents('.elem2').get(0)).css('border', '1px solid red');

    И еще метод .closest() начинает обход, начиная с элемента, удовлетворяющему селектору, а не с его родителя.

    • Комментарии