-
조상요소 탐색프로그래밍/JQuery 2022. 10. 28. 10:11728x90
선택자로 선택된 특정 요소의 조상 요소를 탐색하는 방법에 대해 알아보자.
종류 설명 parent() 선택한 요소의 부모요소를 선택함.
선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 있음.parents() 선택한 요소의 조상요소를 선택함.
선택자를 인수로 전달하여 전달받은 선택자에 해당하는 조상요소만을 선택할 수 있음parentsUntil() 선택한 요소의 조상 요소 중에서 전달받은 선택자에서 해당하는 요소 바로 이전까지의 요소만을 모두 선택함.
선택자를 인수로 전달하지 않으면 parents() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택함.<!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> </ul> </div> </div> <button id="parentBtn">p 요소의 부모 요소</button> </body> </html>
기본 결과 화면 스크립트 parent() 적용
<script> $(function(){ $('#parentBtn').on('click', function(){ $('p').parent().css('border', '3px solid red'); // 바로 윗 부모 }); }); </script>
parent() 적용 후 click 이벤트 결과 스크립트 parents() 적용
<script> $(function(){ $('#parentBtn').on('click', function(){ $('p').parents().css('border', '3px solid red'); // 모든 직계 부모 }); }); </script>
parents() 적용 후 click 이벤트 결과 스크립트 parents() 적용_ 인자 추가
<script> $(function(){ $('#parentBtn').on('click', function(){ $('p').parents('div').css('border', '3px solid red'); // 모든 직계 부모 중에서 div만 찾기 }); }); </script>
parents('div') 적용 후 click 이벤트 결과 스크립트 parentsUntil() 적용
<script> $(function(){ $('#parentBtn').on('click', function(){ $('p').parentsUntil('div').css('border', '3px solid red'); // 모든 직계 부모 중에서 div를 만나기 전까지 찾기 }); }); </script>
parentsUntil() 적용 후 click 이벤트 결과 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
자식, 자손 요소의 탐색 (0) 2022.10.31 형제요소 탐색 (0) 2022.10.30 JQuery로 DOM 다루기 - 요소 삭제 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 대체 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 복제 (0) 2022.10.26