What is jQuery Traversing and how its useful?

The jQuery treversing make relation from one selection and move through the selection until you reach the elements you desire.

Sometime we wanted to select a particular HTML element from parent, grandparent, great-grandparent, and so on to add content, remove or do something which make easy our work, but most of the time we use only few methods like parent(), child() and never tried to use more methods which are available in jQuery library.

Here are the complete traversing list which we can use:

jQuery Traversing - Ancestors:

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

jQuery Traversing - Descendants:

• children()
• find()

jQuery Traversing - Siblings:

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

jQuery Traversing - Filtering:

• first()
• last()
• eq(1)
• filter()
• not()

A basic sctructure of jQuery Traversing - Ancestors which is similar to well know historical generation chart.

Lets explain each method with example. The above image will help you to understand each method.

parent() : The method will select to parent li as in above image.

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

parents() : It will select all parents from it place. Suppose you wanted to add class in parents as in above image example then a class will be added in li, ul, div.

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

You can also select a particular parent element by specifying the element name.

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

parentsUntil(): This method will select all elements between two elements.

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

jQuery Traversing - Descendants:

children() : The children method work similar as parent method but it only treverse a single level.

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

find(): The method will find the element by using HTML elements or using '*' to select all.

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

$(document).ready(function(){
    $("div").find("*").addClass('selectme');
});

jQuery Traversing - Siblings:

siblings(): The method will select all elements under the same parent element.

$(document).ready(function(){
    $("h3").siblings().addClass('selectme');
});

next(): It will select just next one from the mentioned element.

$(document).ready(function(){
    $("h2").next().addClass('selectme');
});

nextAll(): It select all below from the assign element.

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

nextUntil(): Its more useful as it will select all next sibling between them untill it reach to the assign element.

$(document).ready(function(){
    $("h2").nextUntil('h5').addClass('selectme');
});

prev(): It will select the above sibling.

$(document).ready(function(){
    $("h2").prev().addClass('selectme');
});

prevAll(): It will select all above siblings.

$(document).ready(function(){
    $("h2").prevAll().addClass('selectme');
});

prevUntil(): It will select all above sibling untill reach to the assign element same as nextUntill method.

$(document).ready(function(){
    $("h2").prevUntil('h5').addClass('selectme');
});

jQuery Traversing - Filtering:

first(): The method will select the first element of the selected elements.

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

last(): The method will select the last element of the selected elements.

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

eq(1): This method work with a specific index number.

$(document).ready(function(){
    $("p").eq(3).addClass('selectme');
});

filter(): The method will filter the elements which are specified with the selector.

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

not(): The method will filter the elements which are not specified with the selector.

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