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