JQuery closest(), parents() 메소드

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

※ closest()

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

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



※ parents()

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

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


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

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

  1. <ul id="one" class="level-1">
  2. <li class="item-i">I</li>
  3. <li id="ii" class="item-ii">II
  4. <ul class="level-2">
  5. <li class="item-a">A</li>
  6. <li class="item-b">B
  7. <ul class="level-3">
  8. <li class="item-1">1</li>
  9. <li class="item-2">2</li>
  10. <li class="item-3">3</li>
  11. </ul>
  12. </li>
  13. <li class="item-c">C</li>
  14. </ul>
  15. </li>
  16. <li class="item-iii">III</li>
  17. </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

* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성

관련 블로그 구경하기

작성자의 다른 포스팅