THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Traversing - Ancestors


An progenitor is a parent, grandparent, incredible grandparent, thus on.

With jQuery you can navigate up the DOM tree to discover progenitors of an element.


Traversing Up the DOM Tree

Three helpful jQuery strategies for navigating up the DOM tree are:

  • parent()
  • parents()
  • parentsUntil()

jQuery parent() Method

The parent() technique restores the immediate parent component of the chose element.

This strategy just navigate a solitary dimension up the DOM tree.

The following model returns the immediate parent component of each <span> elements:

Example

$(document).ready(function(){
    $("span").parent();
});
Try it yourself »

jQuery guardians() Method

The guardians() strategy restores all predecessor components of the chose component, as far as possible up to the archive's root component (<html>).

The following model returns all ancestors of all <span> elements:

Example

$(document).ready(function(){
    $("span").parents();
});
Try it yourself »

You can likewise utilize a discretionary parameter to channel the scan for ancestors.

The following precedent returns all progenitors of all <span> components that are <ul> elements:

Example

$(document).ready(function(){
    $("span").parents("ul");
});
Try it yourself »

jQuery parentsUntil() Method

The parentsUntil() technique restores all precursor components between two given arguments.

The following model returns all ancestor components between a <span> and a <div> element:

Example

$(document).ready(function(){
    $("span").parentsUntil("div");
});
Try it yourself »

jQuery Traversing Reference

For a total diagram of all jQuery Traversing techniques, if it's not too much trouble go to our jQuery Traversing Reference.