jQuery Siblings
Siblings are elements that have the same parent in logical relationships.
To traverse sideways in the DOM tree, jQuery offers many methods such as siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() and prevUntil().
The siblings() method
The sibling elements of the selected entity are obtained using the jQuery siblings() process.
By using the class, the siblings of the <p> variable, <h1> and <ul> will be highlighted in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("p").siblings().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The next() method
The jQuery next() method returns the selected element's next sibling element. The next sibling of the <p> element, the <ul> element, will be highlighted in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("p").next().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The nextAll() method
The jQuery nextAll() method is used to get all of the selected element's siblings.
The siblings of the <p> element that comes next to it will be highlighted in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("p").nextAll().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<p>Another paragraph here.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The nextUntil() method
To get all the siblings up to but not including the element matched by the selector, use the jQuery nextUntil() process. In simple terms, it returns all the next siblings elements in a DOM hierarchy between two given elements.
The following example will highlight all of the <h1> element's siblings except the <ul> element, i.e. both the <p> and the <p> elements.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("h1").nextUntil("ul").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<p>Another paragraph here.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The prev() method
The jQuery prev() method is used to get the selected element's immediately preceding sibling, i.e. the previous sibling element. The previous sibling of the <ul> element, the <p> element, will be highlighted in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight {
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("ul").prev().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<p>Another paragraph here.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The prevAll() method
To get all preceding siblings of the selected element, use the jQuery prevAll() form.
Both siblings of the <ul> element that comes before this will be highlighted in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("ul").prevAll().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<p>Another paragraph here.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The prevUntil() method
Use the jQuery prevUntil() procedure and then in order for you to get all the siblings up to but not including the element matched by the selector. It returns all previous siblings elements in a DOM hierarchy between two given elements, in simple terms.
The following example will highlight all of the <ul> element's previous siblings except the <h1> element, i.e. both the <p> and <li> elements.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("ul").prevUntil("h1").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just <em>a simple paragraph</em>.</p>
<p>Another paragraph here.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!