jQuery Traversing Siblings, Easy To Learn jQuery Traversing Siblings

jQuery Traversing Siblings

jQuery siblings you can traverse sideways in the DOM tree to find siblings of an element.

Traversing Sideways in DOM Tree

The jQuery siblings are those elements that share the same parent. There are many useful jQuery methods for traversing sideways in the DOM tree :

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() Method

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

The following example returns all sibling elements of <h4> :

<!DOCTYPE html>
<html>
<head>
<title>jQuery siblings() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("h4").siblings().css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px; margin:5px; display:block;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <p>www.freetimelearning.com</p>
  <h4>www.freetimelearn.com</h4>
  <h5>Free Time Learning</h5>
  <p>www.freetimelearning.xyz</p>
  <span>www.freetimelearn.xyz</span>
</div>
 
</body>
</html>

Output :

You can also use an optionally include one or more selector as a parameter within the siblings() method to filter your search for the siblings.

The following example returns all sibling elements of <h4> that are <p> elements :

<!DOCTYPE html>
<html>
<head>
<title>jQuery siblings() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("h4").siblings("p").css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px; margin:5px; display:block;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <p>www.freetimelearning.com</p>
  <h4>www.freetimelearn.com</h4>
  <h5>Free Time Learning</h5>
  <p>www.freetimelearning.xyz</p>
  <span>www.freetimelearn.xyz</span>
</div>
 
</body>
</html>

Output :

jQuery next() Method

The jQuery next() method is used to returns(get) the next sibling element of the selected element.

The following example returns the next sibling of <h4> :

<!DOCTYPE html>
<html>
<head>
<title>jQuery next() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("h4").next().css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px; margin:5px; display:block;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <p>www.freetimelearning.com</p>
  <h4>www.freetimelearn.com</h4>
  <h5>Free Time Learning</h5>
  <p>www.freetimelearning.xyz</p>
  <span>www.freetimelearn.xyz</span>
</div>
 
</body>
</html>

Output :

jQuery nextAll() Method

The jQuery nextAll() method is used to returns(get) all next sibling elements of the selected element.

The following example returns all next sibling elements of <h4> :

<!DOCTYPE html>
<html>
<head>
<title>jQuery nextAll() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("h4").nextAll().css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px; margin:5px; display:block;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <p>www.freetimelearning.com</p>
  <h4>www.freetimelearn.com</h4>
  <h5>Free Time Learning</h5>
  <p>www.freetimelearning.xyz</p>
  <span>www.freetimelearn.xyz</span>
</div>
 
</body>
</html>

Output :

jQuery nextUntil() Method

The jQuery nextUntil() method is used to get all the following siblings up to but not including the element matched by the selector. returns all the next siblings elements between two given elements or arguments.

The following example returns all sibling elements between a <h4> and a <h6> element :

<!DOCTYPE html>
<html>
<head>
<title>jQuery nextUntil() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("h2").nextUntil("h6").css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px; margin:5px; display:block;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <h1>www.freetimelearning.com</h1>
  <h2>www.freetimelearn.com</h2>
  <h3>www.freetimelearning.com</h3>
  <h4>www.freetimelearn.com</h4>
  <h5>www.freetimelearning.com</h5>
  <h6>www.freetimelearn.com</h6>
</div>
 
</body>
</html>

Output :

jQuery prev() Method

The jQuery prev() method is used to get the immediately preceding sibling i.e. the previous sibling element of the selected element.

The following example Return the previous sibling element of each <li> element with class name "start" :

<!DOCTYPE html>
<html>
<head>
<title>jQuery prev() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
$("li.start").prev().css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <ul> 
    <li>www.freetimelearning.com</li>
    <li>www.freetimelearn.com</li>
    <li class="start">www.freetimelearning.xyz (start)</li>
    <li>www.freetimelearn.com</li>
    <li>www.freetimelearning.com</li>
  </ul>   
</div>
 
</body>
</html>

Output :

jQuery prevAll() Method

The jQuery prevAll() method is used to get all preceding siblings of the selected element.

The following example Return all previous sibling elements of each <li> element with class name "start" :

<!DOCTYPE html>
<html>
<head>
<title>jQuery prevAll() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
$("li.start").prevAll().css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <ul> 
    <li>Free Time Learning</li>
    <li>www.freetimelearning.com</li>
    <li>www.freetimelearn.com</li>
    <li class="start">www.freetimelearning.xyz (start)</li>
    <li>www.freetimelearn.com</li>
    <li>www.freetimelearning.com</li>
  </ul>   
</div>
 
</body>
</html>

Output :

jQuery prevUntil() Method

The jQuery prevUntil() method is used to get all the preceding siblings up to but not including the element matched by the selector. In simple words we can say it returns all the previous siblings elements between two given elements.

The following example Return all sibling elements between two <li> elements with class name "start" and "stop" :

<!DOCTYPE html>
<html>
<head>
<title>jQuery prevUntil() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
$("li.start").prevUntil("li.stop").css({"color":"#FFF", "background":"#390"});
});
</script>
<style type="text/css">
.border_color{  color:#F00; padding:5px;}
</style>
</head>
 
<body>
 
<div class="border_color">
  <ul> 
    <li class="stop">Free Time Learning</li>
    <li>www.freetimelearning.com</li>
    <li>www.freetimelearn.com</li>
    <li class="start">www.freetimelearning.xyz (start)</li>
    <li>www.freetimelearn.com</li>
    <li>www.freetimelearning.com</li>
  </ul>   
</div>
 
</body>
</html>

Output :

jQuery Tutorial