jQuery 수평 순회

DOM 트리의 수평 순회

DOM 트리를 수평으로 순회할 수 있는 유용한 메서드가 많이 있습니다:

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

siblings() 메서드

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

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

<!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 blue","width":"200px"});
});
</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> 요소를 반환합니다.

next() 메서드

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

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

<!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":"5px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

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

nextAll() 메서드

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

<!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":"3px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

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

nextUntil() 메소드

nextUntil() 메소드는 주어진 두 매개변수 사이에 있는 다음 형제 요소를 모두 반환합니다.

<!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":"4px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<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>

<h2> 요소 사이의 모든 형제입니다.

jQuery prev(), prevAll() 및 prevUntil() 메서드

prev(), prevAll() 및 prevUntil() 메서드는 반대 방향을 제외하고 위 메서드와 유사하게 작동합니다. 이전 형제 요소(앞이 아닌 DOM 트리의 형제 요소를 따라 뒤로 탐색)

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".father div").prevUntil(".firstp","span").css({"color":"red","border":"4px solid blue"}) }); </script> <style type="text/css"> .father { height:200px; width:200px; border:1px solid blue; } </style> </head> <body> <div class="father"> <p class="firstp">我是p元素</p> <span>我是span元素</span> <p>我是p元素</p> <div>我是div元素</div> </div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear