JQuery Document Object Model Traversal

jQuery provides different types of DOM traversal methods which are helpfull to select elements in a document randomly as well as in sequential method.
Most of the DOM Traversal Methods to filter out elements from a document based on given conditions
Using Dom Traversal Methods we can
  • Finding out elements by index
  • Filtering Elements
  • Locating Descendent Elements
  • .......

Different types of Jquery traversing methods :

  1. eq( index )
    • Reduce the set of matched elements to the one at the specified index
    • Example:- $("li").eq(1).addClass("redColor");
  2. filter( selector )
    • Reduce the set of matched elements to those that match the selector or pass the function's test.
    • Example:- $("li").filter(".details").addClass("redColor");
  3. filter( fn )
    • Used to rome tha attribute with value from the mathced element.
    • Example:- $('li').filter(function(index) { return $('strong', this).length == 1; }).css('background-color', 'red');
  4. is( selector )
    • Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.
    • Example:-if ($(this).is(":first-child")) { $("p").text("This is list item 1"); }
  5. map( callback )
    • Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).
    • Example:- $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );
  6. not( selector )
    • This method filters out all the elements matching the specified selector from the set of matched elements.
    • Example:- $("li").not(".details").addClass("redColor");
  7. slice( start, end )
    • This method selects a subset of the matched elements.
    • Example:-$("li").slice(1, 3).addClass("redColor");
  8. add( selector )
    • Adds more elements, matched by the given selector, to the set of matched elements.
    • Example:-$(".top").add(".middle").addClass("selected");
  9. andSelf( )
    • The andSelf( ) method adds the previous selection to the current selection.
    • Example:-$("div").find("p").andSelf().addClass("border");
  10. children( [selector] )
    • The children( [selector] ) method gets a set of elements containing all of the unique immediate children of each of the matched set of elements.
    • Example:-$("div").children(".selected").addClass("blue");
  11. closest( [selector] )
    • Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
    • Example:-$('li.item-a').closest('li') .css('background-color', 'red');
  12. contents( )
    • Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
    • Example:-$("#frameDemo").contents().find("a").css("background-color","#BADA55");
  13. end( )
    • Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state .
    • Example:- $("p").find("span").end().css("border", "2px red solid");
  14. find( selector )
    • Searches for descendent elements that match the specified selectors.
    • Example:- $("p").find("span").css("border", "2px red solid");
  15. nextAll( [selector] )
    • Find all sibling elements after the current element.
    • Example:- $("div:first").nextAll().addClass("hilight");
  16. next( [selector] )
    • Get a set of elements containing the unique next siblings of each of the given set of elements.
    • Example:- $("p").next(".redColor").addClass("hilight");
  17. offsetParent( )
    • Returns a jQuery collection with the positioned parent of the first matched element.
    • Example:- $("p").offsetParent().addClass('redColor');
  18. parent( [selector] )
    • Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.
    • Example:- $("p").Parent().addClass('redColor');
  19. parents( [selector] )
    • Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
    • Example:- $("p").Parents(".selected").addClass('redColor');
  20. prev( [selector] )
    • Get a set of elements containing the unique previous siblings of each of the matched set of elements.
    • Example:- $("p").prev(".selected").addClass("hilight");
  21. prevAll( [selector] )
    • Find all sibling elements in front of the current element.
    • Example:- $("p").prevAll(".selected").addClass("hilight");
  22. siblings( [selector] )
    • Get a set of elements containing all of the unique siblings of each of the matched set of elements.
    • Example:- $("p").siblings('.selected').addClass("hilight");
Download example from here


Share it


Post a Comment