-
자식, 자손 요소의 탐색프로그래밍/JQuery 2022. 10. 31. 20:44728x90
특정 요소에서 자식, 자손요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자
종류 설명 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>
children() 을 적용한 이벤트 결과 화면 스크립트 find() 적용
<script> $(function(){ $('#findBtn').on('click', function(){ $('li').find('*').css({"border" : "3px solid pink"}); // 모든 자손 요소 }); }); </script>
find() 을 적용한 이벤트 결과 화면 728x90