Jquery search parent element operation method_jquery

The example in this article describes the Jquery search parent element operation method. Share it with everyone for your reference. The specific analysis is as follows:

1. parents() method

Format:

Copy code The code is as follows:

parents([selector])

is used to get the current Match the ancestor elements of each element in the element collection, and you can also use a selector to filter if needed.
For example:

Copy code The code is as follows:

$("p").parents().css("border" , "1px solid blue);

2. cloest method

Format:

Copy code The code is as follows:

closest(selector[, context])

This method Starting from the element itself, it matches up to the superior elements and returns the first matched element.
For example:

Copy code The code is as follows:

$("a").closest("div").css( "border", "1px solid blue");

The main differences between the cloest() and parents() methods are as follows:

① 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 more elements.

3. parent() method

Format:

Copy code The code is as follows:

parent([selector])

is used to get the current Matches the parent element of each element in the collection of elements, optionally filtering using a selector.

For example:

Copy code The code is as follows:

$("p").parent().css( "border", "1px solid blue");

4. parentsUtil() method

Format:

Copy code The code is as follows:

parentsUtil([selector])

is used to get the current Matches the ancestors of each element in the set of elements up to but not including the element matched by the given selector

For example:

Copy code The code is as follows:

$("li#li2").parentsUtil("# ul1_li2").css("background", "#FCF");

5. offsetParent() method

is used to search for the positioned parent element of the first matching element. It is only valid for visible elements. The syntax is as follows:

Copy code The code is as follows:

offsetParent()

This method finds the positioned element of the first matching element and returns a jQuery object wrapped by that element.

Comprehensive example:

Copy code The code is as follows:

• News


• Webpage


• Tieba


• Know


• MP3


• Pictures


• Video


• Map

Title 1

Paragraph 1

Title 2

Paragraph 2

Title Three

Paragraph 3

The operation effect is as shown below:

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