728x90
제이쿼리에서 자식 요소를 선택하는 두 가지 방법에 대해 알아보도록 하겠습니다.
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가 적용되었습니다.
728x90
'기타 > jQuery' 카테고리의 다른 글
[jQuery] 제이쿼리 clone()으로 요소 복사 (0) | 2021.02.09 |
---|---|
[jQuery] 제이쿼리 appendTo, prependTo 사용해 요소 추가하기 (0) | 2021.02.08 |
[jQuery]제이쿼리 css 추가 스타일 변경, 추가 (0) | 2021.02.05 |
[jQuery] 제이쿼리 $ 의미 (0) | 2021.02.04 |
[jQuery] 제이쿼리 선택자 여소 여러개 선택하기 (0) | 2021.02.03 |