jQuery traversal, which means "move", is used to "find" (or pick) HTML elements based on their relationship to other elements.
Start with a selection and move along the selection until you reach the element you want.
The <div> element is the parent of the <ul> and the ancestor of all content within it.
The <ul> element is the parent of the <li> element and is the child of the <div> The <li> element on the
left is the parent of the <span>, the child of the <ul>, and the descendant of the <div>.
The <span> element is a child of <li> and a descendant of both <ul> and <div>.
Two <li> elements are siblings (have the same parent).
The <li> element on the right is the parent of <b>, the child of <ul>, and the descendant of <div>.
The <b> element is a child of the <li> on the right, and a descendant of both <ul> and <div>.
Traverse up the DOM tree The
parent() method returns the immediate parent of the selected element.
The parents() method returns all ancestor elements of the selected element, all the way up to the root element (<html>) of the document.
The parentsUntil() method returns all ancestor elements between two given elements.
Example:
$("span").
The find() method returns the descendant elements of the selected element, all the way down to the last descendant.
Traverse horizontally in the DOM tree The
siblings() method returns all siblings of the selected element.
The next() method returns the next sibling element of the selected element.
The nextAll() method returns all following sibling elements of the selected element.
The nextUntil() method returns all following sibling elements between the two given arguments.
//$("h2").nextUntil("h6");
prev() // Opposite to next
prevAll()
prevUntil()
jQuery traversal - filter
The first() method returns the first element of the selected element.
//$("div p").first();//The first <p> element inside the first <div> element (to meet two conditions)
The last() method returns the last selected element element.
// $("div p").last();//The last <p> element in the last <div> element (to meet two conditions) The
eq() method returns the selected element with the specified index number of elements. The index number of the first element is 0 instead of 1.
//$("p").eq(1); The
filter() method allows you to specify a criterion. Elements that do not match this criterion are removed from the collection, and matching elements are returned.
//$("p").
The not() method returns all elements that do not match the criteria. //$("p").not(".intro");
Refer to the original text: http://www.w3school.com.cn/jquery