Summary of jQuery's methods for obtaining parent elements and parent nodes_jquery

The example in this article summarizes jQuery’s method of obtaining parent elements and parent nodes. Share it with everyone for your reference, the details are as follows:

There are many ways to get parent elements in jquery, such as parent(), parents(), closest(), which can help you find parent elements or nodes. Let’s explain them one by one below:

Let’s give an example first,

<ul class="parent1">
<li><a href="#" id="item1">jquery获取父节点</a></li> 
<li><a href="#">jquery获取父元素</a></li> 
</ul>

Our purpose is to get the ul element with class parent1 through note a with id item1. There are several methods:

1. parent([expr])

Gets a set of elements containing the unique parent element of all matching elements.

You can filter using optional expressions.

The code is as follows

$('#item1').parent().parent('.parent1');

2. :parent

Matches elements that contain child elements or text

The code is as follows

$('li:parent');

3. parents([expr])

Gets a set of elements containing the ancestor elements of all matching elements (excluding the root element). Can be filtered by an optional expression.

The code is as follows

$('#items').parents('.parent1');

4. closest([expr])

closest will first check whether the current element matches, and if it matches, it will directly return the element itself. If there is no match, search upwards for the parent element, layer by layer, until an element matching the selector is found. If nothing is found, an empty jQuery object is returned.

The main difference between closest and parents is:

① The former starts matching and searching from the current element, and the latter starts matching and searching from the parent element;
② The former searches upwards step by step until it finds a matching element and then stops. The latter searches upwards until the root element, then puts these elements into a temporary collection, and then uses the given selector expression to filter;
③ The former returns 0 or 1 element, and the latter may contain 0, 1, or multiple elements.

closest is useful for handling event delegation.

$('#items1').closest('.parent1');

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery traversal algorithm and skills summary", "jQuery table (table) operation skills summary" , "Summary of jQuery drag effects and techniques", "Summary of jQuery extension techniques", "Summary of jQuery common classic special effects", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage summary"

I hope this article will be helpful to everyone in jQuery programming.