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

Для каждого из выбранных элементов, closest() будет искать ближайший подходящий элемент из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM. Условие выбора элемента среди всех перечисленных, могут быть разными, в зависимости от заданных параметров (если задан селектор, то условием будет соответствие селектору; если задан объект jQuery то наличие элемента в этом объекте; если задан 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="https://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~

Ссылки

• Все функции для работы с набором элементов