Поиск элементов лежащих на одном уровне
.siblings()
Осуществляет поиск элементов, являющихся соседними для выбранных элементов (под соседними понимаются элементы, которые имеют общего родителя). При этом, сами выбранные элементы в результат не включаются. Метод имеет один вариант использования:
.siblings([selector]):jQuery1.0
Возвращает все элементы, которые являются соседними для выбранных элементов. При необходимости, можно указать селектор selector для фильтрации результата.
Примеры использования:
$("#block").siblings() | найдет элементы, которые имеют общего родителя, с элементом, обладающим идентификатором block. |
$(".lBlock").siblings() | найдет элементы, которые имеют общих родителей, с элементами класса lBlock |
$(".lBlock").siblings(".cont") | найдет элементы класса cont, которые имеют общих родителей, с элементами класса lBlock |
В действии
Найдем соседние элементы для элементов с классами item-2 и item-ii:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ ul{list-style-type:none; padding-left:20px} li{padding:2px} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="one" class="level-1"~gt~ ~lt~li class="item-i"~gt~I~lt~/li~gt~ ~lt~li id="ii" class="item-ii"~gt~II ~lt~ul class="level-2"~gt~ ~lt~li class="item-a"~gt~A~lt~/li~gt~ ~lt~li class="item-b"~gt~B ~lt~ul class="level-3"~gt~ ~lt~li class="item-1"~gt~1~lt~/li~gt~ ~lt~li class="item-2"~gt~2~lt~/li~gt~ ~lt~li class="item-3"~gt~3~lt~/li~gt~ ~lt~/ul~gt~ ~lt~/li~gt~ ~lt~li class="item-c"~gt~C~lt~/li~gt~ ~lt~/ul~gt~ ~lt~/li~gt~ ~lt~li class="item-iii"~gt~III~lt~/li~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $(".item-2").siblings().css("background-color", "green"); $(".item-ii").siblings().css("background-color", "red"); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~