jQuery horizontal traversal

Horizontal traversal in the DOM tree

There are many useful methods that allow us to traverse the DOM tree horizontally:

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

siblings() method

siblings() method returns all sibling elements of the selected element.

Optional parameters can be used to filter the search for sibling elements.

<!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>

Returns all <p> elements that are siblings of <h2>.

next() method

next() method returns the next sibling element of the selected element.

This method only returns one element.

<!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>

Returns the next sibling element of <h2>.

nextAll() method

nextAll() method returns all following sibling elements of the selected element.

<!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>

Returns all following sibling elements of <h2>.

nextUntil() method

nextUntil() method returns all following sibling elements between the two given parameters.

<!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>

All sibling elements between the <h2> and <h6> elements.

jQuery prev(), prevAll() & prevUntil() methods

The prev(), prevAll() and prevUntil() methods work like The above methods are similar, but in the opposite direction: they return the previous sibling elements (traversing backward along the sibling elements in the DOM tree, rather than forward).

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

jQuery horizontal traversal

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]