Login
Home AI Coder Write To Earn Work With Us Code Editor Blog Report/Complaint Refer And Earn
Library Certifications Online Courses Search E-Books AI Coder Login
AI Coder

jQuery Traversing Siblings

Previous Page Next Page

Traversing Sideways in DOM Tree

In logical relationships, siblings are elements that share the same parent.

jQuery provides several methods such as siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), and prevUntil() that you can use to traverse sideways in the DOM tree.

jQuery siblings() Method

The jQuery siblings() method is used to get the sibling elements of a selected element.

In the example below, the siblings of the <p> element, which are <h1> and <ul>, will be highlighted by adding the class .highlight when the document is ready.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").siblings().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

You can optionally include one or more selectors as a parameter within the siblings() method to filter your search for siblings. In the example below, a border will be applied only around the <ul> elements that are siblings of the <p> element.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").siblings("ul").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

jQuery next() Method

The jQuery next() method is used to retrieve the immediately following sibling element of a selected element. In the example below, the next sibling of the <p> element, which is the <ul> element, will be highlighted.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").next().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

jQuery nextAll() Method

The jQuery nextAll() method is used to retrieve all following sibling elements of a selected element.

In the example below, all siblings of the <p> element that appear after it will be highlighted.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextAll() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").nextAll().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

jQuery nextUntil() Method

The jQuery nextUntil() method is used to retrieve all following siblings up to, but not including, the element matched by the selector. Simply put, it returns all following sibling elements between two specified elements in a DOM hierarchy.

In the example below, all following sibling elements of the <h1> element will be highlighted, excluding the <ul> element. This means both the <p> elements will be highlighted.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextUntil() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("h1").nextUntil("ul").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

jQuery prev() Method

The jQuery prev() method is used to retrieve the immediately preceding sibling element of a selected element. In the example below, the previous sibling of the <ul> element, which is the <p> element, will be highlighted.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prev() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").prev().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

jQuery prevAll() Method

The jQuery prevAll() method is used to retrieve all preceding sibling elements of a selected element.

In the example below, all siblings of the <ul> element that appear before it will be highlighted.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevAll() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").prevAll().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>

jQuery prevUntil() Method

The jQuery prevUntil() method is used to retrieve all preceding siblings up to, but not including, the element matched by the selector. Simply put, it returns all preceding sibling elements between two specified elements in a DOM hierarchy.

In the example below, all preceding sibling elements of the <ul> element will be highlighted, excluding the <h1> element. This means both <p> elements will be highlighted.

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevUntil() Demo</title>
<style>
.highlight{
background: yellow;
}        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").prevUntil("h1").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Previous Page Next Page