JQuery, 부모 태그 찾는 함수 Closest(), Parent(), Parents()

 

JQuery Closest(), Parent(), Parents()

마우스 클릭 이벤트와 같은 이벤트를 발생시킬 때 상위 태그나 요소를 찾을 일이 종종 발생한다.

이때 사용할 수 있는 jquery 함수는 3가지가 있다. 이 세가지는 아주 흔히 사용되는 함수로 반드시 기억해 둔다.

 

.closest()  // .closest("div") 와 같이 사용하여 원하는 특정 요소만 찾을 수 있음.

.parent()   // 바로 상위 요소 하나를 찾아줌.

.parents()  // 상위 모든 요소를 반환함.

 

 

 

예제로 살펴보면 아래와 같다.

 

<div class="top">

  <div class="bottom">

    <a href="#none" id="clickButton">Find parent element</a>

  </div>

</div>

 

 

 

페이지에 clickButton 이라는 id를 가진 a태그를 클릭 했다고 가정했을 때,

아래 주석처럼 각각의 결과물을 확인할 수 있다.

 

 

.closest() 

var tmp = $(this).closest("div");

// tmp에는 클래스 명 "bottom"이 저장된다.

 

.parent() 

var tmp = $(this).parent("div");

// tmp에는 "bottom"이라는 class의 div가 저장된다.

 

 

.parents()

var tmp = $(this).parents("div");

// tmp에는 "bottom"이라는 class와 "top"이라는 클래스의 div가 모두 저장된다.

 

 

 

각각 함수의 속도차를 비교해 보면 closest 함수가 좀 더 빠르다.

속도에 민감한 서비스는 이런 부분도 신경 쓰면 좋을듯?ㅎ

 

 

 

.closest()는 현재 위치에서 상위 요소로

.parent() 는 상위에서 하위로 찾는 방식이다.

 

결국 동작하는 원리가 서로 달라서 속도 차이가 발생하는 것 같다.

 

 

 

관련 자료: 

www.sitepoint.com/jquerys-closest-parents/