[jQuery] 자식 요소 찾기 (children, find)

 

가끔 특정 자식 객체를 가져와야 하는 경우가 있다.

매번 까먹어서 검색하는 나를 위해서 포스팅한다.

 

1. children - 자식 요소만 탐색
2. find - 자식 및 하위 태크 모두 탐색

 

 

 1. children 

$(selector).children(selector)

자식 요소를 탐색할 때 사용

 

 2. find 

$(selector).find(selector)

자식 및 하위 태그 모두 찾을 때 사용

 

 예제 

[ html ]

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

 

- ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때 - children() 

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

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

 

 

- ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때 - find()

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

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