프로그래밍/JQuery
형제요소 탐색
하와이블루
2022. 10. 30. 09:54
728x90
특정 요소에서 형제 요소에 해당하는 요소를 탐색하는 방법에 대해 알아보았다.
| 종류 | 설명 |
| 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>
스크립트 next() 적용
<script>
$(function(){
$('#siblingBtn').on('click', function(){
$('#third').next().css({"border":"3px solid blue"}); // 바로 다음 형제
});
});
</script>
스크립트 nextAll() 적용
<script>
$(function(){
$('#siblingBtn').on('click', function(){
$('#third').nextAll().css({"border":"3px solid blue"}); // 다음 형제 중 모든 형제
});
});
</script>
스크립트 prev() 적용
<script>
$(function(){
$('#siblingBtn').on('click', function(){
$('#third').prev().css({"border":"3px solid blue"}); // 바로 다음 형제
});
});
</script>
스크립트 prevAll() 적용
<script>
$(function(){
$('#siblingBtn').on('click', function(){
$('#third').prevAll().css({"border":"3px solid blue"}); // 바로 다음 형제
});
});
</script>
728x90