목차
children() : 모든 자식 요소 찾기
children("검색필터링") : 검색필터링으로 걸러낸 자식 요소 찾기
find("검색필터링") : 검색필터링으로 걸러낸 모든 자손 요소 찾기
find("*") : 모든 자손 요소 찾기
children() - 모든 자식 요소 찾기
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children().css({"color": "red", "border": "2px solid red"}); // div의 자식들
});
</script>
<div class="homzzang" style="width:500px;">div (나)
<p>p (자식)
<span>span (손자)</span>
</p>
<p>p (자식)
<span>span (손자)</span>
</p>
</div>
결과 보기
children("검색필터링") - 검색필터링으로 걸러낸 자식 요소 찾기
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children("p:last").css({"color": "red", "border": "2px solid red"}); // 자식 중 마지막 p만
});
</script>
<div class="homzzang" style="width:500px;">div (나)
<p>p (자식)
<span>span (손자)</span>
</p>
<p>p (자식)
<span>span (손자)</span>
</p>
</div>
결과 보기
find("검색필터링") - 검색필터링으로 걸러낸 모든 자손 요소 찾기
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("span").css({"color": "red", "border": "2px solid red"}); // 자손 중 모든 span
});
</script>
<div class="homzzang" style="width:500px;">div (나)
<p>p (자식)
<span>span (손자)</span>
</p>
<p>p (자식)
<span>span (손자)</span>
</p>
</div>
결과 보기
find("*") - 모든 자손 요소 찾기
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("*").css({"color": "red", "border": "2px solid red"}); // 모든 자손 요소
});
</script>
<div class="homzzang" style="width:500px;">div (나)
<p>p (자식)
<span>span (손자)</span>
</p>
<p>p (자식)
<span>span (손자)</span>
</p>
</div>
결과 보기
