JQUERY – TRAVERSING

06/04/2020

JQUERY – Traversing is used to select HTML element based on the relationship. It supports lots of methods to find the element.

Jquery – siblings()

This method select all the siblings of the selected element. 

<!DOCTYPE html>
<html>
<head>
<style>
.siblings  { 
  display: block;
   padding: 5px; 
  color: gray;
  text-align: center;
  margin: 15px;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("p").siblings().css({"color": "blue"});
});
</script>
</head>
<body class="siblings">

<div>Parent 
  <p>child 1</p>
  <span>child 2</span>
  <p>child 3</p>
  <h3>child 4</h3>
  
</div>

</body>
</html>

Jquery – next()

This method selects the next sibling of the given element.

In the following method, it will select the next element of the <p> tag.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings  { 
  display: block;
   padding: 5px; 
  color: gray;
  text-align: center;
  margin: 15px;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("p").next().css({"color": "blue"});
});
</script>
</head>
<body class="siblings">

<div>Parent 
  <p>child 1</p>
  <span>child 2</span>
  <p>child 3</p>
  <h3>child 4</h3>
  
</div>

</body>
</html>

Jquery – nextAll()

nextAll() method select all the next sibling of the given elemnt.

The following method will select all the next sibling of the <h1>.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings  { 
  display: block;
   padding: 5px; 
  color: gray;
  text-align: center;
  margin: 15px;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("h1").nextAll().css({"color": "blue"});
});
</script>
</head>
<body class="siblings">

<div>Parent 
  
  <span>child 1</span>
  <h1>child 2</h1>
  <p>child 3</p>
  
  <h3>child 4</h3>
  
</div>

</body>
</html>

Jquery – nextUntil()

This method select all the elements between the given two-element.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings  { 
  display: block;
   padding: 5px; 
  color: gray;
  text-align: center;
  margin: 15px;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("h1").nextUntil("h4").css({"color": "blue"});
});
</script>
</head>
<body class="siblings">

<div>Parent 
  <h1>siblings</h1>
  <p>child 1</p>
  <h2>child 2</h2>
  <p>child 3</p>
  
  <h3>child 4</h3>
  <h4>child 5</h4>
  <h5>child 6</h5>
  
</div>

</body>
</html>

Jquery – prev()

This method selects the previous element of the given element.

The following method selects the previous siblings of the <p> tag.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings  { 
  display: block;
   padding: 5px; 
  color: gray;
  text-align: center;
  margin: 15px;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("p").prev().css({"color": "blue"});
});
</script>
</head>
<body class="siblings">

<div>Parent 
  <h1>siblings</h1>
  <p>child 1</p>
  <h2>child 2</h2>
  <p>child 3</p>
  
  <h3>child 4</h3>
  <h4>child 5</h4>
  <h5>child 6</h5>
  
</div>

</body>
</html>

Jquery – prevAll()

This method selects all the previous elements of the given element.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings  { 
  display: block;
   padding: 5px; 
  color: gray;
  text-align: center;
  margin: 15px;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("h4").prevAll().css({"color": "blue"});
});
</script>
</head>
<body class="siblings">

<div>Parent 
  <h1>siblings</h1>
  <p>child 1</p>
  <h2>child 2</h2>
  <p>child 3</p>
  
  <h3>child 4</h3>
  <h4>child 5</h4>
  <h5>child 6</h5>
  
</div>

</body>
</html>

Thanks for using pheonixsolutions.

Post Views: 182

Leave a Reply