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 하위의 자식들도 포괄하고, 자식은 직계자식만을 의미한다.)