[jQuery] 자식 요소를 찾는 children() , + find()

jQuery를 사용하여 특정 선택자를 기준으로 자식 요소들을 어떻게 찾을 수 있을까?

--> 바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 사용

 

예시))

다음과 같은 DOM이 있는 경우

<ul>
    <li>
    	<span>첫번째</span>
    </li>
    <li>
    	<span>두번째</span>
    </li>
</ul>

 

1. ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때

--> children() 사용

$('ul').children('li'); // return 'li' 배열(li 두개)

// 첫번째 li를 찾을때
$('ul').children('li:eq(0)'); /return 첫번째 li

 

2. ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때

--> find() 사용(children은 자식 태그까지만 찾을 수 있다)

$('ul').find('span') //return span배열(span 두개)

//첫번째 span을 찾을때
1. $('ul>li:eq(0)').children('span');
or
2. $('ul').find('span:eq(0)');

+

참고로 eq(0)은 선택한 요소 중 첫번째 요소를 선택합니다.

ex)

<ul>

    <li></li>  // 첫번째 li --> li:eq(0)

    <li></li>  // 두번째 li --> li:eq(1)

<ul>