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
An ancestor is a parent, grandparent, great-grandparent, and so on
Three useful jQuery methods for ancestor the DOM tree are:
$(document).ready(function(){ $("span").parent(); }); $(document).ready(function(){ $("span").parents(); }); $(document).ready(function(){ $("span").parents("ul"); }); $(document).ready(function(){ $("span").parentsUntil("div"); });
A descendant is a child, grandchild, great-grandchild, and so on
Two useful jQuery methods for decendent the DOM tree are:
$(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 share the same parent.
There are many useful jQuery methods for traversing sideways in the DOM tree:
$(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"); });
The following are most filtering method
$(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"); });
Total : 28005
Today :16
Today Visit Country :