제이쿼리 this 부모 - jeikwoli this bumo

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

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

목차 Show

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

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

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

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

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

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

</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() 는 상위에서 하위로 찾는 방식이다.

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

예제 코드1

예제 코드

예제 코드

웹/jquery 관련 글

parent는 익숙해도 sibling은 쓸 일이 적어서 자꾸 구글링 하는 내 자신을 위해...

상위 요소 : 부모 요소
.parent()	선택한 요소의 부모(parent) 요소를 선택한다.
.parents()	선택한 요소의 상위(ancestor) 요소를 모두 선택한다.
.parentsUntil()	선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.
.closest()	선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택한다.

하위 요소 : 자식 요소
.children()	선택한 요소의 자식(child) 요소를 모두 선택한다.
.find()	선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택한다.

형제 요소
.siblings()	선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.
.next()	선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
.nextAll()	선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.
.nextUntil()	선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.
.prev()	선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.
.prevAll()	선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다.
.prevUntil()	선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다.

기타 탐색
.add()	선택한 요소에 다른 요소를 추가 선택한다.
.addBack()	선택한 요소의 집합에 바로 전에 선택했던 요소를 추가한다.
.each()	선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행한다.
.end()	마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원한다.
.offsetParent()	DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 요소를 선택한다.
.contents()	선택한 요소의 자식(child) 요소를 모두 선택한다. (텍스트 노드와 주석 노드까지 모두 포함함)