[jQuery] 제이쿼리 children / find

jquery 썸네일

jquery .children()

 

.children()은 요소의 바로 아래 자식 요소에게 접근합니다.

 

간단한 예로는 아래와 같다

 

<!--ul의 자식은 li들입니다-->
<ul>
<li>1</li>
<li>2</li>
</ul>
<!--div의 자식은 p입니다-->
<div>
<p>자식 찾기</p>
</div>

 

예전에 올렸던 예제와 같이 보면 도움이 된다.

2021.04.30 - [웹언어/jQuery] - [jQuery] 제이쿼리 parent / parents

[jQuery] 제이쿼리 parent / parents

 

.children()은 ()안에 검색해야 되는 요소를 반듯이 적어야 된다. 

$('요소').children("p");  // 요소의 자식인 P에 접근한다.

 

jquery .find()

 

.find()는 요소의 모든 자식 요소에게 접근합니다.

 

자식의 자식에게 접근이 가능하다.

 

<ul class="mainMenu">
    <li>Home</li>
    <li>
        웹언어
        <ul class="subMenu">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
             <li>jQuery</li>
        </ul>
    </li>
    <li>
        색
        <ul class="subMenu">
             <li>PANTONE</li>
        </ul>
    </li>
    <li>기타자료</li>
    <li>일상</li>
</ul>

자식 찾기 children / find
$('.mainMenu').children("li")	<li>HOME</li> <li>웹언어</li> <li>색</li> <li>기타자료</li> <li>일상</li>
$(".subMenu").children("li")	<li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>PANTONE</li>
$('.mainMenu').find("li")	<li>HOME</li> <li>웹언어</li> <li>색</li> <li>기타자료</li> <li>일상</li> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>PANTONE</li>
.find()는 요소에서 (조건)에 해당되는 모든 자식을 찾는다

.children()과 find()의 차이

.children()은 직계 자식중에서 해당 요소를 챙긴다. (요소의 자식만 챙긴다)

.find()는 모든 자식중에서 해당되는 요소를 찾는다. (요소의 자식의 자식이어도 챙긴다)

 

탐색 범위가 다르다 보니 속도의 차이가 나게 된다.

children이 find보다 훨씬 더 길고 치는데 시간이 걸리는거에 비해

검색시간의 차이(그렇게 많이 나지는 않는다)

 

원하는 자식요소를 찾아서 제어하자 ㅎㅎㅎ