jQuery Traversing
In this blog we will learn about jQuery Traversing.
jQuery traversing are used to find or select HTML elements. For example if you want to select data just after the selector, or select grand data of selector, or select children data of selector or if you want to select children element of selector then you can select by the use of traversing.
There are many types of traversing but basically there three types of traversing:-
1) Parent
2) Children
3) Siblings
Lets see example:
In this example we have made some colorful div assigned as Great grand parent, Grand parent, Parent, children. In this example we will see how by selecting one div we will select other div. Check output after each example.
<html>
<head>
<title>JQuery Traversing</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".children").append('(Selected Selector)');
//here you have selected children as your selector. check the effect below
});
</script>
<style>
.traversing {
background: gray;
padding: 10px;
width:300px;
height:300px;
}
.grandparent_parents {
background: yellow;
padding: 10px;
width:250px;
height:250px;
}
.grandparent {
background: green;
padding: 10px;
width:200px;
height:200px;
}
.parent {
background: white;
padding: 10px;
width:150px;
height:150px;
}
.children {
background: brown;
padding: 10px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="traversing">
<div class="grandparent_parents">Great Grand Parent
<div class="grandparent">Grand Parent
<div class="parent">Parent
<div class="children">Children
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Above we have selected children as the selector therefore the text is coming inside the Children div.
Now change only script section from above written code for next example.
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".children").parent().append('(Selected Selector)');
//here your selector is $(".children").parent(). check the effect below
});
</script>
Now change only script section from above written code for next example.
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".children").parents().append('(Selected Selector)<br>');
//here your selector is $(".children").parents(). check the effect below
});
</script>
Here we have selected selector as parents of children and parents of children are white,green,yellow,gray and even main div therefore the text is coming inside the all the section.
Now change only script section from above written code for next example.
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".children").parents('.grandparent_parents').append('(Selected Selector)');
//here your selector is $(".children").parents('grandparant_parents'). check the effect below
});
</script>
Here we have selected selector as $(“.children”).parents(‘.grandparent_parents’) means children parents whose class is grandparent_parents therefore the text is coming inside yellow section because yellow section class is grandparent_parents.
Now change only script section from above written code for next example.
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".children").parentsUntil('.grandparent_parents').append('(Selected Selector)');
//here your selector is $(".children").parents() now check the effect untill you get the parent whose calss is grandparent_parents the effect will come
});
</script>
Here we have selected selector as $(“.children”).parentsUntil(‘.grandparent_parents’) means all the parent will be selected Until you get the Grand parent.
So here we ends with some example of jQuery traversing.