jQuery 순회 - closest() 메서드

jQuery 트리버싱 참조 매뉴얼

예제

이 예제는 closest()를 사용하여 이벤트 대리를 수행하는 방법을 보여줍니다. 가장 가까운 목록 요소나 그 자식 요소나 자손 요소가 클릭될 때, 노란 배경이切换됩니다：

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

자신이 직접 시도해 보세요

정의와 사용법

closest() 메서드는 선택자와 일치하는 첫 번째 조상 요소를 얻습니다. 현재 요소부터 DOM 트리를 올라갑니다。

문법

.closest(selector)
파라미터 설명
selector 문자 값, 일치 요소의 선택자 표현식을 포함합니다。

상세 설명

jQuery 객체가 DOM 요소 집합을 나타내면, .closest() 메서드는 이 요소 및 그 조상 요소를 DOM 트리에서 검색하고, 일치 요소를 사용하여 새로운 jQuery 객체를 생성할 수 있도록 합니다。.parents() .closest() 메서드와 유사하게, 두 메서드 모두 DOM 트리를 올라갑니다. 두 메서드의 차이는 미묘하지만 중요합니다：

.closest() .parents()
현재 요소부터 시작합니다 부모 요소부터 시작합니다
DOM 트리를 탐색하여 선택자가 적용된 첫 번째 일치 요소까지 올라갑니다。 DOM 트리를 탐색하여 문서의 루트 요소까지 올라가며, 각 조상 요소를 일시적인 집합에 추가합니다；선택자가 적용되면 이 집합을 해당 선택자로 필터링합니다。
0개 또는 1개의 요소를 포함한 jQuery 객체를 반환합니다 0개, 1개 또는 여러 개의 요소를 포함한 jQuery 객체를 반환합니다

아래의 HTML 부분을 보세요：

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

예제 1

항목 A에서 시작하는 <ul> 요소를 검색하는 것을 가정해 보겠습니다:

$('li.item-a').closest('ul').css('background-color', 'red');

자신이 직접 시도해 보세요

이는 level-2 <ul>의 색상을 변경합니다. 이는 DOM 트리를 상승하여 탐색할 때 이 요소를 가장 먼저 만나기 때문입니다.

예제 2

검색할 것으로 생각하는 것은 <li> 요소입니다:

$('li.item-a').closest('li').css('background-color', 'red');

자신이 직접 시도해 보세요

이는 목록 항목 A의 색상을 변경합니다. .closest() 메서드가 DOM 트리를 상승하여 탐색하기 전에 li 요소에서 시작하여 항목 A에 도달할 때까지 검색합니다.

예제 3

DOM 요소를 전달하여 그 안에서 가장 가까운 요소를 검색할 수 있습니다.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

자신이 직접 시도해 보세요

위 코드는 level-2 <ul>의 색상을 변경합니다. 이는 그것이 목록 항목 A의 첫 번째 <ul> 조상이자 목록 항목 II의 자식이기 때문입니다. 그러나 level-1 <ul>의 색상은 변경하지 않습니다. 이는 그것이 list item II의 자식이 아님 때문입니다.

jQuery 트리버싱 참조 매뉴얼