프로그래밍/JQuery
자식, 자손 요소의 탐색
하와이블루
2022. 10. 31. 20:44
728x90
특정 요소에서 자식, 자손요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자
| 종류 | 설명 |
| children() | 매개변수로 전달된 요소를 바로 하위 요소(자식 요소)에서 찾아줌 |
| find() | 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택 별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있음 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자손요소 탐색</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
.container * {
display: block;
border: 1px solid deepskyblue;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="container">
<div>div 요소
<ul>ul 요소
<li>li 요소</li>
<li id="second">li 요소
<p>p요소
<span>span 요소</span>
</p>
</li>
<li>li 요소</li>
<li>li 요소</li>
</ul>
</div>
</div>
<button id="childrenBtn">ul 요소의 모든 자식 요소</button>
<button id="findBtn">li 요소의 모든 자손 요소</button>
</body>
</html>
스크립트 children() 적용
<script>
$(function(){
$('#childrenBtn').on('click', function(){
$('ul').children().css({"border":"3px solid gold"}); // 모든 자식 요소만
});
});
</script>
스크립트 find() 적용
<script>
$(function(){
$('#findBtn').on('click', function(){
$('li').find('*').css({"border" : "3px solid pink"}); // 모든 자손 요소
});
});
</script>
728x90