jQuery 펠로우

형제자매는 동일한 상위 요소를 갖습니다.

jQuery를 사용하면 DOM 트리에서 요소의 형제 요소를 탐색할 수 있습니다.

DOM 트리의 수평 순회

DOM 트리에서 수평 순회를 수행하는 데 유용한 방법이 많이 있습니다:

siblings()
next()
nextAll( )
nextUntil()
prev()
prevAll()
prevUntil()

jQuery s() 메서드

siblings() 메소드는 선택한 요소의 모든 형제를 반환합니다.

다음 예에서는 <h2>의 모든 형제 요소를 반환합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .siblings *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("h2").siblings().css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<body class="siblings">
<div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>
</body>
</html>

프로그램을 실행하여 사용해 보세요

선택적 매개 변수를 사용하여 형제 요소 검색을 필터링할 수도 있습니다.

다음 예에서는 <h2>의 형제 요소인 모든 <p> 요소를 반환합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

프로그램을 실행하여 사용해 보세요.

jQuery next() 메서드

next() 메서드 반환 선택된 요소 요소의 다음 형제 요소입니다.

이 메서드는 하나의 요소만 반환합니다.

다음 예에서는 <h2>의 다음 형제 요소를 반환합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

jQuery nextAll() 메서드

nextAll() 메서드는 다음 형제 요소를 모두 반환합니다. 선택한 요소 요소.

다음 예에서는 <h2>의 다음 형제 요소를 모두 반환합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

프로그램을 실행하여 사용해 보세요

jQuery nextUntil() 메서드

nextUntil() 메서드는 주어진 두 값 사이의 값을 반환합니다. 다음의 모든 형제 요소 사이의 매개변수입니다.

다음 예에서는 <h2> 및 <h6> 요소 사이에 있는 모든 형제 요소를 반환합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>
</body>
</html>

프로그램을 실행하여 사용해 보세요

prev(), prevAll() 및 prevUntil() 메서드를 쿼리하세요

prev(), prevAll() 및 prevUntil() 메서드는 위 메서드와 유사하게 작동하지만 반대 방향으로 작동합니다. 즉, 이전 형제 요소를 반환합니다(앞으로가 아니라 DOM 트리의 형제 요소를 따라 뒤로 이동). ).

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>

제출하다 코드 재설정

자동운전