Ближайший подходящий предок

.closest()

Для каждого из выбранных элементов, closest() будет искать ближайший подходящий элемент из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM. Условие выбора элемента среди всех перечисленных, могут быть разными, в зависимости от заданных параметров (если задан селектор, то условием будет соответствие селектору; если задан объект jQuery то наличие элемента в этом объекте; если задан DOM-элемент, то совпадение с ним):

.closest(selector, [context]):jQuery1.4

selector — селектор, по которому будет происходить поиск.
context — область поиска (если она не задана, то областью поиска будет весь документ), которая может быть задана DOM-элементом, jQuery-объектом или объектом документа.

.closest(selectors, [context]):array1.4

специфическая версия метода closest(), сделанная в основном для внутренних нужд библиотеки. Вместо одного селектора здесь задается массив селекторов. В итоге, метод возвращает массив js-объектов, каждый из которых содержит два поля: selector (содержит один из заданных в массиве селекторов) и elem с DOM-элементом, который был найден методом closest(selector), примененным к первому из выбранных элементов.

selectors — массив селекторов, по которым будут выбираться нужные элементы.
context — см. выше.

.closest(jQuery object):jQuery1.6

jQuery object — объект jQuery по элементам которого будет происходить поиск.

.closest(element):jQuery1.6

element — DOM-элемент, по которому будет происходить поиск (эта версия метода удобна для проверки наличия элемента среди всех выбранных элементов и их предков).


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

$("#lBlock").closest("div") будет искать первый div-элемент среди элемента с id = lBlock и всех его предков.
$(".lBlock").closest("div") для каждого элемента с классом lBlock будет искать первый div-элемент среди самого элемента и его предков.

closest производит поиск элементов вдоль DOM-иерархии каждого из выбранных элементов, что делает его похожим на parents(). Однако стоит различать эти методы:

closest() parents()
Начинает поиск непосредственно с выбранного (выбранных) элемента и движется вверх по иерархии. Начинает поиск с «родителей» выбранных элементов и движется вверх по иерархии
Двигаясь вверх по иерархии останавливает поиск после первого подходящего элемента (после чего начинает осуществлять поиск для следующего выбранного элемента). Поэтому, находит не более одного элемента для каждого из выбранных. Двигается вверх по иерархии до конца, собирая все подходящие элементы. Поэтому может находить много объектов для каждого из выбранных.

В действии

Для каждого элемента с классом matched, найдем ближайший li-элемент из числа следующих: сам выбранный элемент, все его предки.

~lt~!DOCTYPE~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="//code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{font:10pt Arial,sans-serif; color:#555}
    ul{float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd}
    ul.matched{background:url('/tags/images/matched.png') 0% 2% no-repeat;}
    ul.result{position:relative; left:-3px; border:3px solid #ff8888;}
    li{position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1}
    li.matched{background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat}
    li.result{width:60px; height:60px; border:3px solid #ff8888;}
    p{position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt}
    p.matched{background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat}
    p.result{width:12px; height:12px; border:2px solid #ff8888;}
    .matched_addit{background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat}
    .srce{padding:16px 0; text-align:center;} .srce tt{color:#0088ff}
    .tgName{position:absolute; top:12px; left:26px; font-size:8pt; color:#b2ada1}
    li .tgName{top:24px; left:18px;} li p .tgName{top:0; left:1px; font-size:7pt;}
    .clear{clear:both}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p class="matched"~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p class="matched"~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~

  ~lt~div class="clear srce"~gt~
    ключевой код: ~lt~tt~gt~$(".matched").closest("li").addClass("result");~lt~/tt~gt~
  ~lt~/div~gt~
  ~lt~div class="clear"~gt~~lt~p class="matched_addit"~gt~~lt~/p~gt~ – выбранные элементы.~lt~/div~gt~
  ~lt~div class="clear"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – результат работы closest().~lt~/div~gt~

  ~lt~script~gt~
    $(".matched").closest("li").addClass("result");
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • ближайший подходящий предок
  • подходящий предок
  • closest()
  • .closest