How jquery gets the parent node implementation code

To obtain the parent node in jquery, we can use the closest and parents functions. Next I will introduce you to the implementation code of the parent node, hoping to help you all.

There are many ways to obtain the parent node in js, such

1) parentObj. firstChild: This method can be used if the node is the first subnode of a known node (parentObj. This attribute can be used recursively, that is, it supports parentObj. firstChild..., so that you can obtain deeper nodes.

(2) parentObj. lastChild: Obviously, this attribute is the last subnode for obtaining known nodes (parentObj. Like firstChild, it can also be used recursively.

In use, if we combine the two, it will be more exciting, that is, parentObj. firstChild. lastChild. lastChild...

(3) parentObj. childNodes: Get the array of subnodes of known nodes, and then find the desired node through loops or indexes.

In jquery, we can use closest and parents.

Assume that you need to obtain the grandfather node of the current node (the parent node of the parent node), which has the attribute class = "pp", the acquisition method is:

The Code is as follows:	Copy code
$ ('# Cur'). parent (). parent (); Or $ ('# Cur'). parent (). parent ('. pp '); Or $ ('# Cur'). parent ('. pp ');

Method for obtaining the parent node closest ([expr]).

The Code is as follows:	Copy code
$ ('# Cur'). closest ('. pp ');

For example,

The Code is as follows:	Copy code
<Ul class = "parent1"> <Li> <a href = "#" id = "item1"> jquery obtains the parent node. </a> </li> <Li> <a href = "#"> jquery obtains the parent element </a> </li> </Ul>

The purpose is to obtain the ul element of class parent1 through the tag a with id item1. There are several methods:

1. parent ([expr])

Obtains a set of elements that contain the unique parent element of all matching elements.

You can use an optional expression to filter data.

The Code is as follows:

The Code is as follows:	Copy code
$ ('# Item1'). parent (). parent ('. parent1 ');

2.: parent

Match an element containing child elements or text

The Code is as follows:
 

The Code is as follows:	Copy code
$ ('Li: parent ');

3. parents ([expr])

Obtains a set of elements (excluding the root element) that contain all the ancestor elements matching the elements ). You can use an optional expression to filter data.

The Code is as follows:

The Code is as follows:	Copy code
$ ('# Items'). parents ('. parent1 ');

The main differences between closest and parents are:

The former matches the current element and the latter matches the parent element.
The former searches up one by one until the matching elements are found and then stops. The latter searches up until the root elements are put into a temporary collection, filter with the given selector expression
The former returns 0 or 1 element, and the latter may contain 0, 1, or multiple elements.