Traversing is one of the important concept in Jquery Library. Using traversing methods
We can move UP ,down and sideways in the family tree or DOM tree from the selected element.
Traversing methods are used to filter out element from a document based on given condition.
There are so many methods in Jquery library for traversing. For example
1.Add
2. Add(Selector)
3. addBack()
4. andSelf()
5. children()
6. closest()
7. contents()
8. each()
9. end()
10. eq()
11. filter()
12. find()
13. first()
14. has()
15. is()
16. last()
17. map()
18. next()
19. nextAll()
20. nextUntil()
21. not()
22. offsetParent()
23. parent()
24.parents()
25. parentsUntil()
26. prev()
27. prevAll()
28. prevUntil()
29. siblings()
30.slice()
I feel very boring to read and write the long article so to make short article i will include only few methods in this post.
1. Add()
>> This method is used to add the elements on whole document or inside the context element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("h5").add("p").css("background-color", "green");
});
</script>
</head>
<body>
<fieldset>
<legend>
This is the sample code for add() Method in Jquery
</legend>
<h5>This is the Header</h5>
<p>First</p>
<p> Middle</p>
<p><strong> last</strong></p>
</fieldset>
</body>
</html>
Note: In the above code we are selecting all the header(h5) and paragraph(p) and adding the green background color.
2. Add(Selector)
>> This method is used to adds more element match by the given selector in the set of given element
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<style>
.Text_Silver {
background-color:silver;
}
.Text_Blue {
background-color:blue;
}
.Text_Green {
background-color:green;
}
.Text_black {
background-color:black;
}
</style>
<script>
$(function () {
$(".Text_Silver").add(".Text_black").add(".Text_Blue").css("background-color", "red");
});
</script>
</head>
<body>
<fieldset>
<legend>This is the sample code for add(selector) method in Jquery.</legend>
<h5 class="Text_Silver">This is the Header</h5>
<p class="Text_Blue ">First</p>
<p class="Text_Green"> Middle</p>
<p class="Text_black"><strong> last</strong></p>
</fieldset>
</body>
</html>
Note: In the above code, we are selecting the css class with Text_Silver ,Text_black, Text_Blue in Dom element and filling the red color as background.
Summary:
Here we have learnt some of the basic methods of Jquery traversing. In next post i will be coming back with other methods of Jquery traversing.
Chandradev's Blog 
One thought on “Jquery traversing (Part 10.0)”