JQuery closest(), parents() 메소드

jQuery closest(), parents() 메소드의 차이

※ closest()

현재 자신의 요소부터 Document root까지 위로 올라가며 검색을 한다.

parents와 차이점은 "가장 가까운 부모요소 한개의 결과값" 을 도출할 수 있습니다.

※ parents()

현재 자신의 요소부터 Document root까지 검색 후 0개 이상의 결과값을 얻을 수 있다.

중복된 요소를 불러올 수 있기 때문에 parents("tr")[0] 이런식으로 사용을 해왔습니다.

closest를 사용하면 closest("tr") 로 바로 사용하시면 됩니다.

closest() 메소드는 하나의 결과만을 리턴해 주기 때문입니다.

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

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

closest 의 경우에는 item-a 엘리멘트의 가장가까운 level-2 만 배경색이 변경됩니다.

$("li.item-a").parents("ul").css("background-color", "red");

parents 의 경우에는 item-a 엘리멘트의 모든 부모 ul 엘리멘트의 배경색이 변경됩니다.

첫번째 부모 엘리먼트를 찾고 싶은 경우, closest를 사용하면 쉽게 코딩이 가능합니다.

참고 - jquery api closest