parent(),closest()
siglings()
jQuery Selector
jQuery 개발 비중이 늘다보니 jQuery Selector 활용도 늘었다.
누군가 질문해서 대답해주는 김에 jQuery selector 도 정리해보기로 했다.
아래의 예제를 보자. $(this) 는 $(".me") 로 가정한다.
<div class="grandmom">
<div class="mom">
<div class="me">
<div class="son">
<div class="grandson">
</div> //end grandson
</div> //end son
<div> // end me
<div class="brother">
</div> //end brother
<div class="sister">
</div> //end brother
</div> //end mom
</div> //ent grandmom
1. parent()
- 결과 : mom, grandmom
parent() 함수는 부모'들'을 호출한다. 위 상황에서 $(this).parent() 로 호출하면 mom, grandmom 이 모두 호출된다. grandmom만 선택하고 싶다면 $(this).parent().parent() 로 호출하는 법도 있지만, 보다 세련되게 하려면 index로 호출하는 eq() 함수를 쓰자. $(this).parent().eq(2); 이렇게 하면 2번째 상위의 parent 요소가 선택된다.
2. closest()
- 결과 : mom
closest() 함수는 함수 명처럼 가장 가까운 부모를 선택한다.
3. siglings()
-결과 : brother, sister
형제 요소들'을' 호출한다. 만약 바로 옆에 있는 형제만 선택하고 싶다면 next() 함수를 쓰면 된다. $(this).next("div") 이렇게 선택하면 .brother 가 선택된다.
4. children()
- 결과 : son
직계 자식을 선택한다. son 밑에 grandson이 있지만 grandson 은 선택되지 않는다. grandson까지 선택하고 싶으면 find() 를 사용하자. find는 depth에 상관없이 자손들을 모두 선택한다. (jQuery 선택자에서 자손과 자식은 다른 의미로 사용된다. 자손은 depth 하위의 자식들도 포괄하고, 자식은 직계자식만을 의미한다.)
