jQuery | Traversing
In jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element.
Based on the traversing purposes following methods are Categorized as follows:
Tree Traversing:
Ancestors:
-
parent()
it gives parent element of specified selector
Syntax:$(selector).parent();
-
parents()
it gives all ancestor elements of the specified selector.
Syntax:$(selector).parents();
-
parentsUntil()
it gives all ancestor elements between specified selector and arguments.
Syntax:$(selector).parentsUntil(selector, filter element)
$(selector).parentsUntil(element, filter element)
-
offsetParent()
it gives the first positioned parent element of specified selector.
Syntax:$(selector).offsetParent();
-
closest()
it gives the first ancestor of the specified selector.
Syntax:$(selector).closest(selector);
$(selector).closest(selector, context);
$(selector).closest(selection);
$(selector).closest(element);
Descendants:
-
children()
it gives the children of each selected elements, optionally filtered by a selector.
Syntax:$(selector).children();
-
find()
it gives descendant elements of specified elements, filtered by a selector, jQuery object, or element.
Syntax:$(selector).find('selector to find');
Siblings:
-
siblings()
it gives all siblings of the specified selector.
Syntax:$(selector).siblings();
-
next()
it gives the next sibling element of the specified selector.
Syntax:$(selector).next();
-
nextAll()
it gives all next sibling elements of the specified selector.
Syntax:$(selector).nextAll();
-
nextUntil()
it gives all next sibling elements between specified selector and arguments.
Syntax:$(selector).nextUntil();
-
prev()
it gives the previous sibling element of the specified selector.
Syntax:$(selector).prev(selector);
$(selector).prev()
-
prevAll()
it gives all previous sibling elements of the specified selector.
Syntax:$(selector).prevAll(selector, filter element)
$(selector).prevAll(element, filter element)
-
prevUntil()
it gives all previous sibling elements between specified selector and arguments.
Syntax:$(selector).prevUntil(selector, filter element)
$(selector).prevUntil(element, filter element)
Filtering
-
first()
it gives the first element of the specified selector.
Syntax:$(selector).first();
-
last()
it gives the last element of the specified selector.
Syntax:$(selector).last();
-
eq()
it gives an element with a specific index number of the specified selector.
Syntax:$(selector).eq(index);
$(selector).eq( indexFromEnd );
-
filter()
it remove/detect an elements that are matched with specified selector.
Syntax:$(selector).filter(selector)
$(selector).filter(function)
$(selector).filter(selection)
$(selector).filter(elements)
-
has()
it gives all elements that have one or more elements within, that are matched with specified selector.
Syntax:$(selector).has(selector);
-
is()
it checks if one of the specified selector is matched with arguments.
Syntax:.is( selector )
.is( function )
.is( selection )
.is( elements )
-
map()
Pass each element in the current matched set through a function, producing a new jQuery object containing the return values
Syntax:.map( callback )
-
slice()
it selects a subset of specified selector based on its argument index or by start and stop value.
Syntax:$(selector).slice(start, end );
$(selector).slice(start);
Miscellaneous Traversing
-
add()
it add all elements to set of matched elements to manipulate them at the same time.
Syntax:$(selector).add(selector to add);
-
addBack()
it add the previous set of elements on the stack to the current set, optionally filtered by a selector.
Syntax:$(selector).addBack();
-
andSelf()
Deprecated 1.8 which is alias of addBack().
Syntax:$(selector).addSelf();
-
contents()
it gives all direct children, including text and comment nodes, of the specified selector.
Syntax:$(selector).contents();
-
not()
it gives all elements that do not match with specified selector.
Syntax:$(selector).not(selector);
-
end()
it is most recent filtering operation in the current chain and return the set of matched elements to its previous state and it doesn’t accept any arguments.
Syntax:$(selector).each(callback function);
Collection Manipulation
-
each()
it iterates over the DOM elements and execute call back function
Example 1:
<!DOCTYPE html> < html > < head > < style > .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </ style > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > < script > $(document).ready(function() { $("h2").siblings().css({ "color": "red", "border": "2px solid red" }); $("h2").parent().css({ "color": "green", "border": "2px solid blue" }); $("p").first().css( "background-color", "yellow"); $("p").has("span").css( "background-color", "indigo"); }); </ script > </ head > < body class = "siblings" > < div >w3wiki (parent) < p >w3wiki</ p > < p >< span >w3wiki</ span ></ p > < h2 >w3wiki</ h2 > < h3 >w3wiki</ h3 > < p >w3wiki</ p > </ div > </ body > </ html > |
Output:
Example 2:
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < style > p { color: grey; margin: 10px; padding: 10px; } form { margin: 10px; padding: 10px; } #article b { color: blue; font-weight: bold; } label { color: green; font-weight: bold; } </ style > < script src = "https://code.jquery.com/jquery-1.10.2.js" > </ script > </ head > < body > < p >< em >Hello</ em >w3wiki</ p > < p id = "article" >< b >Article Info: </ b ></ p > < form > < label >Article Title:</ label > < input type = "text" name = "article" value="jQuery | Traversing Example 2" /> < br > < br > < label >Author:</ label > < input type = "text" name = "author" value = "Vignesh" /> < br > < br > < label >Author's Email id:</ label > < input type = "text" name = "author" value = "vignesh@gmail.com" /> < br > < br > < label >Website:</ label > < input type = "text" name = "url" < br > < br > </ form > < script > $("#article") .append($("input").map(function() { return $(this).val(); }) .get() .join(", ")); </ script > < script > $("p") .find("em") .end() .css("border", "2px red solid"); </ script > </ body > </ html > |
Output
Contact Us