Поиск всех предков

.parents()

Осуществляет поиск всех предков выбранных элементов, то есть, не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM. Метод имеет один вариант использования:

.parents([selector]):jQuery1.0

Возвращает всех предков выбранных элементов. При необходимости, можно указать селектор selector для фильтрации результата.

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

$("#block").parents() вернет всех предков элемента, имеющего идентификатор block.
$("div").parents() вернет всех предков для div-элементов на странице.
$("div").parents(".lBlock") вернет всех предков класса lBlock, для div-элементов на странице.

В действии

Зальем элемент с классом item-b зеленым цветом, а всем его предкам добавим красную рамку:

~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-b").css("background-color", "green").parents().css("border", "1px solid red");
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • родительские элементы
  • предки
  • parents()
  • .parents