Introduction to jQuery traversing methods

Introduction:-

JQuery is a very power tool which provides various traversing methods to select the element randomly and sequentially. With JQuery selecting and finding an element is very easy.But at the time, we may wish to refine the selection.It is very useful when HTML structure is complicated.Jquery traversing methods are very helpful in this case.

JQuery traversing is a way to find elements. In which we can find the elements based on their relation to other elements.You can start with one element and move to other elements by using jquery traversing methods.

Jquery Provides various methods for traversing through dom.There are many occasions when you need to select parent or ancestor element, that is where jquery traversing methods come into play.With this methods, you can easily go up, go down and traverse through the dom easily.Below is the list of popular jquery traversing methods.

1) parent()
=> This method 

find out the direct parent of an element.This method only traverse up to single level in a dom.

               $( "li.item-a" ).parent().css( "background-color", "red" );
       

2) parents()
=> This method find out t

he all parents of an element.It returns all the ancestor element of an selected element.

               $( "li.item-a" ).parent().css( "background-color", "red" );
       

3)  parentsUntil()
=> This method find out the parents until to given specific element.It returns all the ancestor element between the selector and stop.

               $( "li.item-a" ).parentsUntil( ".level-1" ).css( "background-color", "red" );
       

4) closest()
=> This method find out the closest element.It returns first ancestor element of the selected element.

               $("span").closest("ul").css({"color": "red", "border": "2px solid red"});
       

5) children()
=> This 

method find out children using any id or class.This function gets the immediate children from sets of elements.

               $("ul").children().css({"color": "red", "border": "2px solid red"});
       

6) find()
=>  This method find any element inside an 

elment.It returns only descendents elements of  the selected element.

               $("ul").find("span").css({"color": "red", "border": "2px solid red"});
       

7) prev()
=>  This method find 

previous element.It returns the previous sibling of the selected elements.

               $("li.start").prev().css({"color": "red", "border": "2px solid red"});
       

8) next()
=>  This method 

find next element.It returns next sibling of the selected element.

               $("li.start").next().css({"color": "red", "border": "2px solid red"});
       

9) siblings()
=>  This method find out the elements which are on 

same level.It returns all siblings element of the selected elements.

               $("li.start").siblings().css({"color": "red", "border": "2px solid red"});
       

10) nextAll()
=>  This method find out the all elements comes after the element.

               $("li.start").nextAll().css({"color": "red", "border": "2px solid red"});
       

11) nextUntil()
=>  This method find out the all elements until to a specified element comes after the element.It returns all siblings elements of the selected elment.

                $("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});
       

12) prevAll()
=>  This method find out the all elements comes before the element.It returns all pervious siblings element of the selected element.

               $("li.start").prevAll().css({"color": "red", "border": "2px solid red"});
       

13) prevUntil()
=>  This method find out the all elements until to a specified element comes before the element.It returns all previous siblings element between selector and stop.

               $("li.start").prevUntil("li.stop").css({"color": "red", "border": "2px solid red"});

I am sharing example for how you can use these methods.You can try above method and you will easily understand jquery traversing methods.

That's it.

If you have any query you can contact me at my skype id rohit.oodles