Метод siblings библиотеки jQuery

Reading time ~5 minutes

Небольшое отступление - в одних постах я говорю о функциях jQuery, в других - о методах jQuery. Где же правильно? В принципе, и то и то правильно. И функция jQuery, и метод jQuery. Но последний вариант более правильный, поэтому в дальнейшем буду “обзывать” подобные вещи методами.

Метод

1
.siblings()
предназначен для выборки соседних элементов. С помощью этого метода выбираются все элементы, находящиеся на одном уровне DOM с элементом, служащим в качестве критерия отбора.

Метод имеет один вариант использования (синтаксис):

.parent([selector])

Все очень похоже на то, как эти дела обстоят в CSS, но приведу простой пример для иллюстрации:

<nav class="test">
  <a href="#" class="test__link">test link item</a>
  <a href="#" class="test__link">test link item</a>
  <a href="#" class="test__link proba">test link item</a>
  <a href="#" class="test__link">test link item</a>
  <a href="#" class="test__link">test link item</a>
</nav>
$('.proba').siblings().addClass('selected');

читается это так - добавить класс

1
.selected
для всех элементов, соседних (sibling) с элементом, имеющим класс
1
.proba
. То есть, класс
1
.selected
будет добавлен всем элементам
1
a
, так как они находятся на одном уровне DOM с элементом
1
.proba
и являются соседними по отношению к нему.

По умолчанию можно не передавать методу

1
.siblings()
аргумент в виде селектора -
1
.siblings('a')
, так как подразумеваются элементы, которые являются соседними в текущей HTML-разметке. Но можно передавать методу в качестве аргумента имя класса -
1
.siblings('.test__link')
; или элемент с именем класса (идентификатора) -
1
.siblings('a.test__link')
.

Краткие примеры использования метода

1
.siblings()
, взятые с ресурса jQuery Page2Page:

  • 1
    $("#block").siblings()
    
    - найдет элементы, которые имеют общего родителя с элементом, обладающим идентификатором
    1
    #block
    
  • 1
    $(".lBlock").siblings()
    
    - найдет элементы, которые имеют общих родителей с элементами класса
    1
    .lBlock
    
  • 1
    $(".lBlock").siblings(".cont")
    
    - найдет элементы класса
    1
    .cont
    
    , которые имеют общих родителей с элементами класса
    1
    .lBlock
    

Важный момент - в этом случае класс

1
.selected
не будет добавлен к элементу
1
.proba
. Другими словами, в методе
1
.siblings()
к элементу, служащему в качестве критерия, не применяются действия этого метода.

Чтобы было еще понятнее, о чем идет речь, представлю ниже результат работы описанного выше javascript-кода:

<nav class="test">
  <a href="#" class="test__link selected">test link item</a>
  <a href="#" class="test__link selected">test link item</a>
  <a href="#" class="test__link proba">test link item</a>
  <a href="#" class="test__link selected">test link item</a>
  <a href="#" class="test__link selected">test link item</a>
</nav>

Метод

1
.siblings()
прост и понятен. Единственным “подводным камнем” при работе с ним является такой момент - нужно быть внимательным с уровнями вложения элементов. Другими словами, в дереве DOM элементы не расположены на одном уровне (не являются sibling), однако разработчик упрямо пытается применить к этим элементам метод
1
.sibling()
. И потом сильно недоумевает, почему ничего не работает, хотя код то правильный!

Приведу простой пример такой ошибки, с которой один раз сам столкнулся. Здесь пример кристально ясный и понятный, однако на деле все было не так прозрачно (в совокупности с другим кодом):

<ul class="test">
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link proba">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>
$('.proba').siblings().addClass('selected');

Представленный выше javascript-код работать не будет, так как элементы

1
a
(а код был сделан в расчете на эти элементы) соседними (siblings) не являются. Это хорошо заметно, если внимательно рассмотреть HTML-код примера.

Вот, в принципе, и все, что можно сказать о методе

1
.siblings()
.

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017