Traverse horizontally in DOM tree
There are many useful jQuery methods in the DOM tree that can be traversed horizontally:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
jQuery siblings() method
The siblings() method returns all siblings of the selected element.
The following example returns all siblings of < H2 >.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
<style>
.siblings * {
display: block;
border: 2px solid #ddd;
color: #ccc;
padding: 5px;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("h2").siblings().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="siblings">
<div>div (Parent element)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>jQuery next() method
The next() method returns the next sibling of the selected element.
The following example returns the next sibling of < H2 >
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
<style>
.siblings * {
display: block;
border: 2px solid #ddd;
color: #ccc;
padding: 5px;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
<script>
$(document).ready(function () {
$("h2").next().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="siblings">
<div>div (Parent element)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>jQuery nextAll() method
The nextAll() method returns all the next siblings of the selected element.
The following example returns all the next siblings of < H2 >.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
<style>
.siblings * {
display: block;
border: 2px solid #ddd;
color: #ccc;
padding: 5px;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
<script>
$(document).ready(function () {
$("h2").nextAll().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="siblings">
<div>div (Parent element)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>jQuery nextUntil() method
The nextUntil() method returns all the next siblings between two given parameters.
The following example returns all siblings between the < H2 > and < H6 > elements:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Butterfly course( jc2182.com)</title>
<head>
<style>
.siblings * {
display: block;
border: 2px solid #ddd;
color: #ccc;
padding: 5px;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
<script>
$(document).ready(function () {
$("h2").nextUntil("h6").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="siblings">
<div>div (Parent element)
<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>Try it online
Jquery prev(), prevlall() & prevuntil() method
The prev(), prevlall(), and prevUntil() methods work in a similar way, but with the opposite function: they return previous siblings (traversing backward rather than forward along siblings in the DOM tree).