jQuery Traversing
jQuery traversing : jQuery Traversing stands traverse the Html DOM based on the element’s relationship. jQuery Traversing is used to filter the html elements based on the element’s relationship with the other elements.
Basic Example Of jQuery Traversing
Lets Start with very basic example.
<div> <!-- This <div> is Parent of <ul> element->
<ul> <!-- This <ul> is Parent of both <li> element->
<li> <!-- This <li> is Parent of <a> And child of <ul> and descendent of <div> element->
<a href="">Test</a><!-- This <a> is child of <li> element and descendent of <ul> and <div> element->
</li>
<li><!-- This <li> is Parent of <span> element, child of <ul> and descendent of <div> element->
<span></span><!-- This <span> is child of <li> element and descendent of <ul> and <div> element->
</li>
</ul>
</div>
The above example shows the element's relationship within the DOM.
jQuery Provides various methods to traverse the DOM
[table width="100%" colwidth="10|100|290|200" colalign="left|left|left|left|left"]
No,Method ,Description, Example & Detail, Demo
1.,.add(), Adds elements to the matching elements,More Detail & Demo», Demo »
2,.addBack(), Add the previous set of elements to current set optionally set by filer,More Detail & Demo», Demo »
3,.children(), Get all the elements of the selected element,More Detail & Demo », Demo »
4,.closest(),Get first ancestor element of the current selection.,More Detail & Demo », Demo »
5,.contents(),Get children of each element including text and comment nodes,More Detail & Demo », Demo »
6,.each(),each method() uses a function to iterate for each matching element. ie. function executes for each matching element,More Detail & Demo », Demo »
7,.eq(),jQuery eq method() finds the element at specified index.,More Detail & Demo », Demo »
8,.filter(),jQuery filter method() is used to get elements that match the specified pattern.,More Detail & Demo », Demo »
9,.find(),jQuery find() method is used to get all descendant elements of the selected element.,More Detail & Demo », Demo »
10,.first(),first method() is used to get the first element of the selected element,More Detail & Demo », Demo »
11,.has(),jQuery has method is used to get the elements which contains the particular element inside it.,More Detail & Demo », Demo »
12,.is(),jQuery “is()” method is used to match the current set of elements against the jQuery selector\,jQuery Object or jQuery element. If argument matches any of these elements it returns true .,More Detail & Demo », Demo »
13,.last(),jQuery “last()” method is used to get the last element of the selected elements.,More Detail & Demo », Demo »
14,.map(),jQuery “last()” method passes each element in current matched set using a function which generates new jQuery objects and returns value.,More Detail & Demo », Demo »
15,.next(),jQuery “next()” is used to get the next siblings of the matched elements.,More Detail & Demo », Demo »
16,.nextAll(),jQuery “nextAll()” method is used to get all the next siblings of the matched elements.,More Detail & Demo », Demo »
17,.nextUntil(),jQuery “nextUntil()” is used to get the next siblings of the matched elements.,More Detail & Demo », Demo »
18,.not(),jQuery “not()” is used to remove the element from set of the matched elements.,More Detail & Demo », Demo »
19,.offsetParent(),jQuery “offsetParent()” is used to get the closest ancestor element from set of the matched elements.,More Detail & Demo », Demo »
20,.parent(),jQuery “offsetParent()” is used to get the closest ancestor element from set of the matched elements.,More Detail & Demo », Demo »
21,.parents(),jQuery “parents() Method ” is used to get all ancestors of the selected element.,More Detail & Demo », Demo »
22,.parentsUntil(),jQuery “parentsUntil() Method ” is used to get all ancestors between selector and selector-element ie. stop point where to stop matching ancestor elements.,More Detail & Demo », Demo »
23,.prev(),jQuery “prev() Method ” is used to get previous elements of the selected element.,More Detail & Demo », Demo »
24,.prevAll(),This Method ” is used to get all previous elements of the selected element.,More Detail & Demo », Demo »
25,.prevUntil(),jQuery “prevUntil() Method ” is used to get all previous siblings between selector and selector-element,More Detail & Demo », Demo »
26,.siblings(),jQuery “siblings() Method ” is used to get all siblings of the selected element.,More Detail & Demo », Demo »
27,.slice(),jQuery “slice() Method ” is used to select elements between the two indices.,More Detail & Demo », Demo »
[/table]
Advertisements
