menu
Ad goes here

Sunday, 4 September 2016

What is jQuery Traversing and how its useful?

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.
jQuery Traversing

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');
});

jQuery parent method


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'); 
});

jQuery parents method


You can also select a particular parent element by specifying the element name.
$(document).ready(function(){
    $("span").parents("ul");
});

jQuery parents method


parentsUntil(): This method will select all elements between two elements.
$(document).ready(function(){
    $("span").parentsUntil("div");
});

jQuery parentsUntil method


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');
});

jQuery children method


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');
});

jQuery siblings method


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');
});

jQuery eq method


filter(): The method will filter the elements which are specified with the selector.
$(document).ready(function(){
    $("p").filter(".filterme");
});

jQuery filter method


not(): The method will filter the elements which are not specified with the selector.
$(document).ready(function(){
    $("p").not(".filterme");
});

jQuery not method

12 comments:


  1. Thank You for such amazing information. This is one of the best sites which provide all the details of related topics.
    Examhelpline.in

    ReplyDelete
  2. Thanks for sharing such great information. This is one of the best sites which provide all the details of relevance to topics.
    careinfo.in

    ReplyDelete

  3. Thank you for giving us such kind of information. This is one of the best sites having all the details.
    carebaba.com

    ReplyDelete
  4. it's good to be here and read some interesting posts , i got very useful information over here thanks for sharing it .

    UPSSSC VDO Answer Key

    ReplyDelete
  5. Really you have provided amazing information. Thanks for such kind of best details.
    Examhelpline.in

    ReplyDelete
  6. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete
  7. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    thesis Writing Service

    ReplyDelete
  8. Well, it’s a nice one, I have been looking for. Thanks for sharing such informative stuff.
    Mergers and Acquisitions consultant

    ReplyDelete
  9. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here.
    Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai .
    or learn thru Javascript Training in Chennai.
    Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai

    ReplyDelete

Books for you (Crafted with )