jQuery метод .siblings()

Определение и применение

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

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
// выбор всех смежных элементов
$( selector ).siblings()

// выбор смежного элемента с определенным селектором
$( selector ).siblings( selector )

selector - Selector

Добавлен в версии jQuery

1.0

Значения параметров

Параметр Описание
selector Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр.

Пример использования

Метод .siblings() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<ul>
  <li>Первый элемент</li>
  <li class="second">Второй элемент</li>
  <li>Третий элемент</li>
</ul>
<ul>
  <li>Первый элемент</li>
  <li class="active">Второй элемент</li>
  <li>Третий элемент</li>
</ul>
<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>
main.js
JavaScript
$(document).ready(function () {
    $('li.second').siblings().css('color', 'red') // выбираем все смежные элементы элемента <li> с классом second в документе
    $('li').siblings().css('background', 'khaki') // выбираем все смежные элементы элемента <li> в документе
    $('li').siblings('.active').css('color', 'green') // выбираем все смежные элементы элемента <li> в документе, которые имеют определенный селектор
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .siblings() мы:

  • Выбираем все смежные элементы элемента <li> с классом second в документе и с помощью метода .css() устанавливаем им цвет текста красный. Обратите внимание, что будут выбраны только два элемента, так как только эти смежные элементы имеют того же родителя, что и элемент с классом second.
  • Выбираем все смежные элементы элемента <li> в документе и с помощью метода .css() устанавлием цвет заднего фона цвета khaki.
  • Выбираем все смежные элементы элемента <li> в документе, которые имеют определенный селектор и с помощью метода .css() устанавливаем им цвет текста зеленый.