-
형제요소 탐색프로그래밍/JQuery 2022. 10. 30. 09:54728x90
특정 요소에서 형제 요소에 해당하는 요소를 탐색하는 방법에 대해 알아보았다.
종류 설명 siblings() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택 next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택 nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택
전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택 prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택
전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음<!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>li 요소</li> <li id="third">li 요소 <p>p요소 <span>span 요소</span> </p> </li> <li>li 요소</li> <li>li 요소</li> </ul> </div> </div> <button id="siblingBtn">li 요소의 형제 요소</button> </body> </html>
기본 결과 화면 스크립트 siblings() 적용
<script> $(function(){ $('#siblingBtn').on('click', function(){ $('#third').siblings().css({"border":"3px solid blue"}); // 형제 전부 찾지 }); }); </script>
siblings() 적용 후 click 이벤트 결과 스크립트 next() 적용
<script> $(function(){ $('#siblingBtn').on('click', function(){ $('#third').next().css({"border":"3px solid blue"}); // 바로 다음 형제 }); }); </script>
next() 적용 후 click 이벤트 결과 스크립트 nextAll() 적용
<script> $(function(){ $('#siblingBtn').on('click', function(){ $('#third').nextAll().css({"border":"3px solid blue"}); // 다음 형제 중 모든 형제 }); }); </script>
nextAll() 적용 후 click 이벤트 결과 스크립트 prev() 적용
<script> $(function(){ $('#siblingBtn').on('click', function(){ $('#third').prev().css({"border":"3px solid blue"}); // 바로 다음 형제 }); }); </script>
prev() 적용 후 click 이벤트 결과 스크립트 prevAll() 적용
<script> $(function(){ $('#siblingBtn').on('click', function(){ $('#third').prevAll().css({"border":"3px solid blue"}); // 바로 다음 형제 }); }); </script>
prevAll() 적용 후 click 이벤트 결과 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
박스모델 메소드 (0) 2022.11.01 자식, 자손 요소의 탐색 (0) 2022.10.31 조상요소 탐색 (0) 2022.10.28 JQuery로 DOM 다루기 - 요소 삭제 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 대체 (0) 2022.10.27