jQuery Проброс - братские (siblings)

Используя jQuery, мы можем легко выполнять горизонтальное遍ение в DOM-дереве для поиска элементов同级.

Братские элементы - это элементы, которые делят одинаковый родитель.

В этой главе мы объясним, как выполнять горизонтальное遍ение в DOM-дереве.

Горизонтальное遍ение в DOM-дереве

У нас есть следующие методы jQuery для горизонтального遍ения DOM-дерева:

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

В этой главе мы покажем, как использовать каждый из этих методов.

Метод jQuery siblings()

jQuery siblings()Метод возвращает все элементы同级 для выбранного элемента.

Ниже приведен пример, который возвращает все элементы同级 для каждого элемента <li> с классом "middle":

$("document").ready(function(){
　　$("li.middle").siblings().css("background-color", "lightgreen");
});

Вы также можете использовать опциональные параметры для фильтрации поиска по同级.

Ниже приведен пример, который возвращает все элементы同级 с классом "bold" для каждого элемента списка:

$("document").ready(function(){
　　$("li").siblings(".bold").css("background-color", "lightgreen");
});

Метод jQuery next()

jQuery next()Метод возвращает следующий элемент同级, который находится сразу после выбранного элемента.

Ниже приведен пример, который возвращает следующий элемент同级 для каждого элемента DIV:

$("document").ready(function(){
　　$("div").next().css("background", "lightblue");
});

Метод jQuery nextAll()

jQuery nextAll()Метод возвращает все следующие элементы同级 для выбранного элемента.

Ниже приведен пример, который возвращает все следующие элементы同级 для каждого элемента DIV:

$("document").ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

Метод jQuery prev()

jQuery prev()Метод возвращает предыдущего брата элемента, который находится сразу после выбранного элемента.

Ниже приведен пример, который возвращает предыдущий элемент同级 для каждого элемента DIV:

$("document").ready(function(){
　　$("div").prev().css("background", "lightblue");
});

Метод jQuery prevAll()

jQuery prevAll()Метод возвращает все предыдущие элементы同级 для выбранного элемента.

Ниже приведен пример, который возвращает все предыдущие элементы同级 для каждого элемента DIV:

$("document").ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

Методы nextUntil() и prevUntil() jQuery

jQuery nextUntil()Метод возвращает все элементы-братья между двумя заданными параметрами.

jQuery prevUntil()Метод возвращает все элементы-братья между двумя заданными параметрами.

Следующий пример возвращает всех последующих братьев до следующего <dt>:

$("document").ready(function(){
　　$("#term-2").nextUntil("dt").css("background-color", "coral");
});

Следующий пример возвращает всех предыдущих братьев до предыдущего <dt>:

$("document").ready(function(){
　　$("#term-2").prevUntil("dt").css("background-color", "coral");
});

Референтное руководство по遍ению jQuery

Для получения полной информации о методах遍ения, пожалуйста, посетите нашРеферентное руководство по遍ению jQuery.