Поиск родительского элемента

.parent()

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

.parent([selector]):jQuery1.0

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

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

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

В действии

Найдем бомбы в коробках (элементы класса bomb, лежащие непосредственно внутри элементов класса box):

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="//code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div{
      width: 60px;
      height: 60px;
      float: left;
      padding: 15px;
      margin: 5px;
      background-color: #EEEEEE;
      font-size: 18pt;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="box"~gt~ ~lt~p class="fish"~gt~1~lt~/p~gt~ ~lt~/div~gt~
  ~lt~div class="box"~gt~ ~lt~span class="paper"~gt~ ~lt~p class="bomb"~gt~2~lt~/p~gt~ ~lt~/span~gt~ ~lt~/div~gt~
  ~lt~div class="box"~gt~ ~lt~p class="panties"~gt~3~lt~/p~gt~ ~lt~/div~gt~
  ~lt~div class="box"~gt~ ~lt~p class="bomb"~gt~4~lt~/p~gt~ ~lt~/div~gt~
~lt~script~gt~
    $(".bomb").parent(".box").css("border","3px solid red").html("Бомба, епт!");
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Замечание: в данном примере, div-элемент под номером 2 не был выделен, поскольку между элементами классов box и bomb есть промежуточный элемент с классом paper. Поэтому, элемент box не является непосредственным родителем элемента bomb.

Ссылки

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