JQuery Traversing
jQuery traversing is used to find or select HTML elements based on their relation to other elements in DOM.
JQuery traverson start with selected elemented and move through the selection until you reach the elements those you actually want to select.
It's like a post master who needs to deliver a letter to an address.
what he does, first he finds the locality then socity/Steet where this letter to be deliver and then Flat no/HouseNo.
In jQuery,This movement is called traversing or moving through the DOM.
Commonly used JQuery traversion methods.
1-Children() : Returns all direct children of the selected element.
Ex-$("#pnlTraverse").children();
The above method will return all the child element of panel named pnlTraverse
2-Each():Executes a function for each matched element
Ex-$("#pnlTraverse").children().each(function(){alert($(this).text())});
Above code will first select all the child element of
pnlTraverse panel and then display each child element text as an alert
3-End(): Ends the most recent filtering operation in the current chain, and return the set
of matched elements to its previous state.
Ex-$( "p" ).find("span").end()
Above code iterate through all the p element and check for span tag inside it, if it's find then it stops and returns the reference of that p tag which has span inside it.
4-Filter(): This function method returns elements that match a certain criteria.
Elements that do not match the criteria are removed from the selection, and those that match the criteria will be returned.
This method is often used to narrow down the search for an element in a group of selected elements.
Ex-$("p").filter(".intro")
Above code iterate through all the p element and check intro class is applied to it, if applied returns the reference of that p element.
5- Find(): Returns descendant elements of the selected element.
Ex-$( "p" ) .find( "span" )
Above code iterate through all the p element and check for span tag inside it, if it's find then it returns the reference of that span tag.
6-First():Returns the first element of the selected elements
7- Siblings():Returns all sibling elements of the selected element.
8-Next(): Returns the next sibling element of the selected element
Ex-$( "li" ).next().css( "background-color", "red" );
Above code will change the background color of element next to li to red.
9- nextAll(): Returns all next sibling elements of the selected element
10-Parent(): Returns the direct parent element of the selected element
11-Prev(): Returns the previous sibling element of the selected element
$( "li" ).prev().css( "background-color", "red" );
12- PrevAll():Returns all previous sibling elements of the selected element.
13-Last():Returns the last element of the selected elements
$( "li" ).last().css( "background-color", "red" );
14-Has(): Returns all elements that have one or more elements inside of them