728x90
traversing이란?
체인을 계속하는 것을 뜻합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function(){
//Siblings 형제를 찾는 메서드
// $("h2").siblings().css({"color": "red", "border": "2px solid red"}); //형제클래스 위 아래로 다 찾아줌★
// $("h2").next().css({"color": "red", "border": "2px solid red"}); // 바로 다음것 1개만 찾아줌
// $("h2").nextAll().css({"color": "red", "border": "2px solid red"}); //다로 다음 것부터 전부 다 찾아줌
// $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"}); h2의 다음부터 h6전까지 찾아줌★
// $("h4").prev().css({"color": "red", "border": "2px solid red"}); // h4의 바로 전 것 1개를 찾아줌
// $("h4").prevAll().css({"color": "red", "border": "2px solid red"}); //처음부터 h4태그 전까지 찾아줌
// $("h2").prevUntil("p").css({"color": "red", "border": "2px solid red"}); //h4부터 p전까지 찾아줌★
});
</script>
</head>
<body class="siblings">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
728x90
'Programming > JQery' 카테고리의 다른 글
| JQuery 정리 (0) | 2023.08.18 |
|---|---|
| JQuery traversing(4) Filtering (0) | 2023.06.23 |
| JQuery traversing(2) 자식을 찾는 메서드들 (0) | 2023.06.23 |
| JQuery traversing(1) 부모 찾는 메서드 (0) | 2023.06.23 |
| JQuery 스크롤이벤트 (0) | 2023.06.23 |
