jQuery Traversing

By ukmodak | April 29th 2021 06:09:07 AM | viewed 225 times

jQuery Traversing

jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

The folowing are different type traversing

  1. ancestor -is a parent, grandparent, great-grandparent, and so on
  2. descendant - is the child elements of ancester
  3. sibling- whose parent element are same
  4. filtering- a specific element based on its position in a group of elements.

Ancestor

An ancestor is a parent, grandparent, great-grandparent, and so on

Three useful jQuery methods for ancestor the DOM tree are:

  1. parent()- returns the direct parent element of the selected element.
  2. parents() - returns all ancestor elements of the selected element, all the way up to the document's root element
  3. parentsUntil() - returns all ancestor elements between two given arguments.

Examples:

$(document).ready(function(){
  $("span").parent();
}); 


$(document).ready(function(){
  $("span").parents();
});

$(document).ready(function(){
  $("span").parents("ul");
});

$(document).ready(function(){
  $("span").parentsUntil("div");
});  

Decendents

A descendant is a child, grandchild, great-grandchild, and so on

Two useful jQuery methods for decendent the DOM tree are:

  1. children()- returns all direct children of the selected element.
  2. find() -returns descendant elements of the selected element, all the way down to the last descendant.

Examples:

$(document).ready(function(){
  $("div").children();
}); 

$(document).ready(function(){
  $("div").children("p.first");
}); 

$(document).ready(function(){
  $("div").find("span");
}); 

$(document).ready(function(){
  $("div").find("*");               // find all decendent of div
});   

Siblings

Siblings share the same parent.

There are many useful jQuery methods for traversing sideways in the DOM tree:

  1. siblings()- returns all sibling elements of the selected element.
  2. next() -returns the next sibling element of the selected element.
  3. nextAll() -returns all next sibling elements of the selected element
  4. nextUntil() -returns all next sibling elements between two given arguments..
  5. prev() -just like the methods above but with reverse functionality: they return previous sibling elements
  6. prevAll() -just like the methods above but with reverse functionality: they return previous sibling elements
  7. prevUntil() -just like the methods above but with reverse functionality: they return previous sibling elements

Examples:

$(document).ready(function(){
  $("h2").siblings();
});
$(document).ready(function(){
  $("h2").siblings("p");
}); 
$(document).ready(function(){
  $("h2").next();
}); 

$(document).ready(function(){
  $("h2").nextAll();
});

$(document).ready(function(){
  $("h2").nextUntil("h6");
}); 

Filtering

The following are most filtering method

  1. first()- method returns the first element of the specified elements.
  2. last() -returns the last element of the specified elements.
  3. eq() -returns an element with a specific index number of the selected elements.
  4. filter() -method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned...
  5. not() -returns all elements that do not match the criteria

Examples:

$(document).ready(function(){
  $("div").first();
}); 

$(document).ready(function(){
  $("div").last();
}); 

$(document).ready(function(){
  $("p").eq(1);
}); 

$(document).ready(function(){
  $("p").filter(".intro");
}); 

$(document).ready(function(){
  $("p").not(".intro");
}); 
bONEandALL