Detailed explanation of the usage of jquery upward traversal, downward traversal, sibling traversal and filtering

1. Traverse upward - ancestor elements

① $(selector).parent([filter]): Returns the direct parent element of the selector matching element. The method can accept a filter selector to filter the returned parent element.

② $(selector).parents([filter]): Returns all ancestor nodes of the matching element, all the way up to the document root element html. The method can accept a filter selector to filter the returned ancestor nodes.

Note: The difference between parent and parents, parent returns the direct parent node, parents returns all ancestor nodes, and $("html").parent() returns the document node, while $ ("html").parents() returns empty.

③ $(selector).parentUntil([ancestorSelector][,filter]): Returns all ancestor nodes between the matching node and ancestorSelector. Note that the matching points of ancestorSelector are not included. The method can accept a filter selector. To filter the returned ancestor nodes, if ancestorSelector is empty or no element matching ancestorSelector is found in its ancestor nodes, all ancestor nodes are returned, which is equivalent to the parents() method.

$(selector).parentUtil(element[,ancestorSelector]): The usage and meaning are the same as above.

④ $(selector).offsetParent(): Returns the most recent positioned ancestor element of the matching element. The so-called positioned ancestor element means that its CSS position attribute is set to relative, absolute, fixed, mainly plays a great role in calculating the offset and position of elements during animation presentation.

⑤ $(selector).closest(ancestorSelector[,context]): Get the nearest ancestor element that matches ancestorSelector. The method can accept a parameter context to control the scope of the search. The difference from the parents method is as follows:

a.closest searches upward starting from the current element itself.
parents starts from the parent node element.

b.closest traverses up the DOM tree until it finds an element position matching ancestorSelector
parents traverses up the DOM tree until the root element of the document, adding each ancestor element to a temporary collection ; If a selector is applied, the collection will be filtered based on the selector

c.closest returns a jQuery object containing 0 or one element
parents returns 0, one or more The jQuery object of the element

Other transformation usage:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. Traverse downward--descendant elements

① .children([childrenSelector]): Return the direct children of the element Element, method can accept a parameter to filter the returned child elements.

② .find(descendantSelector): Returns all descendant elements of the element that match descendantSelector, going all the way down to the last descendant.

Other deformation usage:

.find(jQuery object);
.find(element);

③ .contents(): Returns all child elements of the element. The difference from children is that contents includes text nodes and comment nodes.

3. Sibling traversal - sibling elements

① .siblings([selector]): Returns all sibling elements of the current element. The method can receive an optional parameter to filter the returned brothers. element.

② .next([selector]): Returns the next sibling element of the current element. The method can accept an optional parameter to filter the returned sibling elements.

③ .nextAll([selector]): Returns all sibling elements after the current element. The method can accept an optional parameter to filter the returned sibling elements.

④ .nextUntil([selector][,filter]): Returns all sibling elements of the current element until it encounters a sibling element that matches the selector condition. The method can accept an optional parameter filter to filter the returned sibling elements. .

⑤ .prev/prevAll/prevUntil has the same usage and similar functions as next/nextAll/nextUntil, but the search direction is opposite.

4. Filtering

① .filter(selector): Filter the sub-sets that meet the selector conditions from the current matching element set to reduce the matching scope.

.filter(function(index)): Filter the currently matching element collection according to the callback function . The parameter index passed in by the callback function refers to the index# of the element in the collection. ##, this can be used to represent the element in the function body. The function returns true/false. If true is returned, the child element is retained, otherwise the child element is excluded.

.filter(element|jQueryObject)

⑥ .is(selector|function(index)|element|jQueryObject): Check the element collection based on a selector or callback function or element or jQuery object, if it contains at least one that matches the given expression element returns true, otherwise returns false. In addition, if the current element collection is empty or the expression is empty, false is returned. This method is generally used in callback functions such as Event processinghandler to determine whether this is a specific element

⑦ .map(callback(index,domElement)): Match the current The element array is converted into another object array (whether it is a dom element or not) through the return value of the callback function. If you want to convert an ordinary jQueryObject array, you can use the jQuery.map(array,callback(objectOfArray,indexOfArray)) method.

⑧ .not(selector|elements|function(index)|jQuery object): Delete elements that meet parameter adjustment from the currently matched element array. Parameters can be selector, DOM element, ordinary jQuery objects, and A callback function that returns a boolean variable.

⑨ .slice(start[,end]): Get a subset of the specified range from the currently matched element set. If start and end are negative numbers, get the element direction from the end to the beginning.

The above is the detailed content of Detailed explanation of the usage of jquery upward traversal, downward traversal, sibling traversal and filtering. For more information, please follow other related articles on the PHP Chinese website!