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/