We can traverse the sideways in the Dom tree with the help of jQuery and find the siblings of an element.
The sibling elements share the same parent.
Traversing Sideways: jQuery methods to traverse the sideways in dom tree.
-
siblings(): The siblings() is an inbuilt method in jQuery which is used to find all siblings elements of the selected element.
Syntax:$(selector).siblings(function)
-
next() & nextAll(): The next() is an inbuilt function in jQuery which is used to return the next sibling of the selected element.
Syntax:$(selector).next()
-
nextUntil(): The nextUntil() is an inbuilt method in jQuery which is used to find all sibling elements between two given elements.
Syntax:$(selector1).nextUntil(selector2)
-
prev() & prevAll(): The prev() is an inbuilt function in jQuery which is used to return the previous sibling element of the selected element.
Syntax:$(selector).prev()
-
prevUntil(): The prevUntil() is an inbuilt method in jQuery which is used to find all the previous sibling elements between two given elements.
Syntax:$(selector1).nextUntil(selector2)
Example-1: Using “siblings() method”.
<!DOCTYPE html> < html >
< head >
< style >
.block {
display: block;
border: 1px solid black;
padding: 10px;
color: black;
}
</ style >
< script src =
</ script >
< script >
$(document).ready(function() {
$("h3").siblings().css({
"color": "green",
"border": "3px solid green"
});
});
</ script >
</ head >
< body >
< div class = "block" >
< h2 class = "block" >Geeks</ h2 >
< h3 class = "block" >for</ h3 >
< h4 class = "block" >Geeks</ h4 >
</ div >
</ body >
</ html >
|
Output:
Example-2: Using “next() method”.
< html >
< head >
< style >
.next * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
</ style >
< script src =
</ script >
< script >
$(document).ready(function() {
$("h3").next().css({
"color": "black",
"border": "2px solid green"
});
});
</ script >
</ head >
< body class = "next" >
< div >
This is parent element !
< p >This is first paragraph
</ p >
< span >first span box </ span >
< h2 >heading 2 !</ h2 >
< h3 >heading 3 !</ h3 >
< p >This is the second paragraph
and next sibling to h3 !</ p >
</ div >
</ body >
</ html >
|
Output: