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

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

Метод

1

.siblings()

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

.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

1

.proba

1

.selected

1

a

1

.proba

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

1

.siblings()

1

.siblings('a')

1

.siblings('.test__link')

1

.siblings('a.test__link')

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

1

.siblings()

• 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()

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

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

1

.siblings()

На этом все.