.closest (selector)

설명 : 집합의 각 요소에 대해 요소 자체를 테스트하고 DOM 트리에서 조상을 통해 위로 이동하여 선택기와 일치하는 첫 번째 요소를 가져옵니다.

DOM 요소 집합을 나타내는 jQuery 객체가 주어지면이 .closest()메소드는 DOM 트리에서 이러한 요소와 조상을 검색하고 일치하는 요소에서 새 jQuery 객체를 생성합니다. .parents()및 .closest()방법은 모두 DOM 트리를 횡단 점에서 유사하다. 이 둘의 차이는 미묘하지만 중요합니다.

<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>

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

$( "li.item-a" )

  .closest( "ul" )

  .css( "background-color", "red" );

레벨 2의 색상이 변경 <ul>됩니다. DOM 트리 위로 올라갈 때 처음으로 발생하기 때문입니다.

<li>대신 에 요소를 검색한다고 가정 해보십시오 .

$( "li.item-a" )

  .closest( "li" )

  .css( "background-color", "red" );

이렇게하면 목록 항목 A의 색상이 변경 .closest()됩니다 . 메서드는 DOM 트리를 진행하기 전에 요소 자체에서 검색 을 시작하고 항목 A가 선택기와 일치하면 중지합니다.

가장 가까운 요소를 검색 할 컨텍스트로 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" );

목록 항목 A <ul>의 첫 번째 상위 <ul>항목이고 목록 항목 II의 하위 항목 이기 때문에 레벨 2의 색상이 변경됩니다 . <ul>그러나 목록 항목 II의 하위 항목이 아니기 때문에 레벨 -1의 색상은 변경 되지 않습니다.