jQuery의 탐색(순회)메소드 - 동위에 대해 알아보자
라이브러리 연결 후 진행할 것
탐색(순회) 메소드 (Traversing) - 동위
✔️ sideways(동위) 메소드: 같은 레벨에 있는 요소들 (형제들)을 선택할 수 있는 메소드
👉🏻 $("선택자").siblings()
선택된 요소와 같은 레벨에 있는 모든 요소들을 선택
👉🏻 $("선택자").siblings("선택자")
선택된 요소와 같은 레벨에 있는 요소들 중에서 제시한 값과 일치하는 요소들만 선택
👉🏻 $("선택자").next()
<!-- 내 바로 밑 동생 하나만 선택하겠다 -->
선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소 딱 하나만 선택
👉🏻 $("선택자").nextUntil("선택자")
선택된 요소와 같은 레벨에 있는 다음 요소들 중에서 제시한 값과 일치하는 요소들까지만 선택
👉🏻 $("선택자").prev()
<!-- 내 바로 위 형님 하나만 선택하겠다 -->
선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 이전 요소 딱 하나만 선택
👉🏻 $("선택자").preveAll()
<!-- 내 바로 위 형님들 모두 선택하겠다 -->
선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 이전 요소들 모두 선택
👉🏻 $("선택자").preveUntil("선택자")
선택된 요소와 같은 레벨에 있는 이전 요소들 중에서 제시된 값과 일치하는 요소들까지만 선택
📍 sibling: 형제
📍 preve: 형님
📍 next: 동생
<head>
<style>
.wrap, .wrap>* {
border : 1px solid lightgray;
display : block;
margin : 15px;
padding : 5px;
}
</style>
</head>
<body>
<div class="wrap">
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h4</h3>
<p>p</p>
</div>
<script>
$(function() {
// 앞으로 부여할 스타일 객체 미리 생성
var style1 = {color : "red", border : "2px solid red"};
var style2 = {color : "blue", border : "2px solid blue"};
var style3 = {color : "yellow", border : "2px solid yellow"};
var style4 = {color : "pink", border : "2px solid aqua"};
// siblings
$("h2").siblings().css(style1); // h2를 기준으로 같은 레벨에 있는 요소들을 모두 선택 (단, 본인 제외)
$("h2").siblings("p").css(style2); // h2를 기준으로 같은 레벨에 있는 요소들 중 p만 선택
// next
$("h2").next().css(style3); // h2를 기준으로 바로 다음 요소 하나만을 선택
$("h2").nextAll().css(style4); // h2를 기준으로 바로 다음 요소들을 모두 선택
$("h2").nextUntil("p").css("font-size", "3em"); // h2를 기준으로 뒤의 p 요소 전까지 모두 선택
// preve
$("h2").prev().css("backgroundColor", "pink"); // h2를 기준으로 바로 앞 요소 하나만을 선택
$("h2").prevAll().css("color", "pink").css("backgroundColor", "aqua"); // h2를 기준으로 바로 앞 요소들을 모두 선택
$("h2").preUntil("p").css("border", "3px green dotted"); // h2를 기준으로 앞의 p 이전 요소까지 모두 선택
});
</script>
</body>