Определение и применение
jQuery метод .siblings() позволяет получить все элементы находящиеся на одном уровне вложенности (смежные элементы) с указанным элементом, дополнительно они могут фильтроваться с помощью заданного селектора.
Обращаю Ваше внимание, что под одноуровневыми элементами стоит понимать элементы, которые имеют одного и того же родителя.
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| selector | Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр. |
Пример использования
В этом примере с использованием jQuery метода .siblings() мы:
- Выбираем все смежные элементы элемента с классом second в документе и с помощью метода .css() устанавливаем им цвет текста красный. Обратите внимание, что будут выбраны только два элемента, так как только эти смежные элементы имеют того же родителя, что и элемент с классом second.
- Выбираем все смежные элементы элемента в документе и с помощью метода .css() устанавлием цвет заднего фона цвета khaki.
- Выбираем все смежные элементы элемента в документе, которые имеют определенный селектор и с помощью метода .css() устанавливаем им цвет текста зеленый.
Результат нашего примера:
Пример использования метода .siblings() jQuery перемещения
Содержание:
.siblings( [selector ] ) Возвращает: jQuery
Описание: Осуществляет поиск элементов, являющихся соседними для выбранных элементов (под соседними понимаются элементы, которые имеют общего родителя). При этом, сами выбранные элементы в результат не включаются.
Добавлен в версии: 1.0 .siblings( [selector ] )
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.
Consider a page with a simple list on it:
If we begin at the third item, we can find its siblings:
The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.
Я пытаюсь получить ближайший соседний элемент. Эти две кнопки расположены рядом друг с другом, и я хочу нажать кнопку A, чтобы получить кнопку B, и нажать кнопку B, чтобы получить кнопку A. Так что в основном она просто обнаруживает ближайшую соседнюю кнопку.
Я попробовал это:
И при нажатии кнопки A он выбирает сам! Очевидно, ближайшая кнопка к кнопке A . это кнопка A. Не знаю, почему она так работает. Это как самый близкий мне человек . это я.
РЕДАКТИРОВАТЬ: Это один и тот же код для любой кнопки, поэтому следующий и предыдущий не будет так удобно. Я предполагаю, что есть селектор для ближайшего элемента.
1 ответ
Вы можете использовать .prev(«button») и .next(«button») , чтобы выбрать непосредственно предыдущего и следующего братьев и сестер. И .prevAll(‘button’) и .nextAll(«button») , чтобы выбрать все до и все после братьев и сестер.
