Getting Started with jQuery Traversing

Once we have selected some HTML elements and want to modify, we need to traverse those elements, Traversing is a technique which is used to select elements by the relationships to other elements. By this technique we can start with one selector and can go on desire elements. Commonly used traversing functions are given below:

  • each()
  • first()
  • last()
  • next()
  • prev()
  • parent()
  • children()
  • siblings()

each()

The jQuery each() function is used to loop through each element of the target jQuery object. Here is an example:

Example

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>each function in juquery traversing</title>
  5. <script src="Scripts/jquery-2.1.4.min.js"></script>
  6. <style type="text/css">
  7. .main{
  8. height:100px;
  9. width:100px;
  10. padding:10px;
  11. background-color:yellow;
  12. display:inline-block;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. $(document).ready(function() {
  17. $(".main").each(function() {
  18. $(this).css("background-color", "red");
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div class="main">Div 1</div>
  25. <div class="main">Div 2</div>
  26. <div class="main">Div 3</div>
  27. </body>
  28. </html>

Output


Figure 1: Image for each function

First()

The first() function returns the first element in the selected set of elements.

Example

  1. $(document).ready(function() {
  2. $("div").first().css({
  3. "color": "red",
  4. "border": "2px solid red",
  5. "background-color": "white"
  6. });
  7. });

Output: This function works for all the divs in the body sections excluding the first div.


Figure 2: image after first function

last()

The last() function returns the last element in the selected set of elements.

Example:

  1. $(document).ready(function() {
  2. $("div").last().css({
  3. "color": "red",
  4. "border": "2px solid red",
  5. "background-color": "white"
  6. });
  7. });

Output: This function works for all the divs in the body sections excluding the last div.


Figure 3: image after last function

next()

The next() method returns the next sibling element of the selected element excluding the selected element.

Example:

  1. $(document).ready(function() {
  2. $("div").next().css({
  3. "color": "red",
  4. "border": "2px solid red",
  5. "background-color": "white"
  6. });
  7. });

Output: This function works for all the divs in the body section excluding the first div. When all the elements are from same class then it works after excluding the first element.


Figure 4: image after next function

prev()

The prev() function returns the previous element to the selected element. When all the elements are from same class then it works after excluding the last element.

Example

  1. $(document).ready(function() {
  2. $("div").next().prev({
  3. "color": "red",
  4. "border": "2px solid red",
  5. "background-color": "white"
  6. });
  7. });

Output: This function works for all the divs in the body section previous to the selected div.


Figure 5: image after prev function

parent()

The parent() function returns the parent of the selected element by calling the jQuery parent() function

Example

  1. <style type="text/css">
  2. .main {
  3. height: 100px;
  4. width: 100px;
  5. padding: 10px;
  6. background-color: yellow;
  7. display: inline-block;
  8. }
  9. .demo {
  10. width: 500px;
  11. }
  12. </style>
  13. < script type = "text/javascript" > $(document).ready(function() {
  14. $(".main").parent().css({
  15. "color": "red",
  16. "border": "2px solid red",
  17. "background-color": "red"
  18. });
  19. });
  20. </script>

Output


Figure 6: image after parent function

children()

The children() function returns the children of the selected element by calling the jQuery children() function

Example

  1. $(document).ready(function() {
  2. $(".demo").children().css({
  3. "color": "red",
  4. "border": "2px solid red",
  5. "background-color": "red"
  6. "color": "white"
  7. });
  8. });

Output


Figure 7: Image after children function

siblings()

The siblings() function returns all the siblings of given HTML elements.

Example

  1. $(document).ready(function() {
  2. $(".main").siblings().css({
  3. "color": "red",
  4. "border": "2px solid red"
  5. });
  6. });

Output


Figure 8: Image after sibling function

Summary

In this article I am trying to explain all the commonly used jQuery traversing functions.