jQuery closest(), parents() 메소드의 차이
jQuery closest(), parents() 메소드의 차이
일전에 jQuery 관련 코딩을 할때에는 closest() 메소드의 존재를 몰랐습니다.
그래서 parents() 메소드를 사용하곤 했었는데 불편했던 점 중에 하나가 parens() 메소드의 경우는 자신부터 document root 까지 검색을 하기 때문에 검색 결과가 1개 이상일 수 있다는 점이었습니다.
그래서 꼭 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 를 사용하면 쉽게 코딩이 가능하리라 생각됩니다.
참고
http://api.jquery.com/closest/