[jQuery] 제이쿼리 자식 요소 선택 by find(), children()

제이쿼리에서 자식 요소를 선택하는 두 가지 방법에 대해 알아보도록 하겠습니다.

 

1.find()

find함수는 선택된 요소에서 더 구체적으로 원하는 요소를 찾는 함수입니다.

문법

$(태그, class, id).find(조건)

예시

<div>
    <p class="1">11111</p>
    <p class="2">22222</p>
    <p class="3">33333</p>
</div>
<script>
    $( "div" ).find( "p.3" ).css( "background-color", "red" );
</script>

위의 코드는 div 태그를 선택하고 그 안에서 class가 3인 p태그를 골라 css함수로 배경 색을 빨간색으로 바꾸는 코드입니다. 

아래 결과를 보면 제대로 선택한 것을 알 수 있습니다.

2.children()

children은 선택한 태그 안에 자식 태그 중 조건에 부합하는 것을 선택하는 함수입니다.

<div>
    <p class="1">11111</p>
    <p class="2">22222</p>
    <p class="3">33333</p>
</div>
<script>
    $( "div" ).children( "p.3" ).css( "background-color", "red" );
</script>

div 태그에서 class가 3인 p태그를 선택해 배경색을 빨간색으로 바꾸는 코드로 find함수와 매개변수가 같습니다.

 

 

3. 차이점

find는 자식 태그뿐 아니라 손자 태그, 그 아래 태그까지 모두 접근할 수 있지만

children은 자식 태그까지만 접근할 수 있습니다.

<div class="a">
    <div class="b">
        <p class="1">11111</p>
        <p class="2">22222</p>
        <p class="3">33333</p>
    </div>
</div>
<script>
    $( "div.a" ).children( "p.2" ).css( "background-color", "red" );
    $( "div.a" ).find( "p.3" ).css( "background-color", "red" );
</script>

children으로 접근한 class가 2인 p태그는 css가 적용되지 않았지만

find로 접근한 3은 css가 적용되었습니다.