JQuery traverses DOM nodes.

Source: Internet
Author: User

JQuery traverses DOM nodes.

This document describes how JQuery traverses DOM nodes. Share it with you for your reference. The specific analysis is as follows:

The core of this section is to introduce JQuery's DOM operations. We have introduced many node operations such as creation, deletion, and replacement. This section describes how to traverse nodes and select neighboring nodes.

Children () method

This method is used to obtain the child element set of matching elements. Based on the structure of the DOM tree, you can know the relationship between each element and the number of its subnodes.

The children () method is used to obtain the number of all child elements matching the element.

Var $ body = $ ("body "). children (); var $ p = $ ("p "). children (); var $ ul = $ ("ul "). children (); alert ($ body. length); // <body> the element has two sub-elements: alert ($ p. length); // <p> the element has 0 sub-elements alert ($ ul. length); // <p> the element has three sub-elements for (var I = 0; I <$ ul. length; I ++) {alert ($ ul [I]. innerHTML );}

PS: The children () method only considers child elements, not any child elements.

Next () method

This method is used to obtain the peer element next to the matching element. The structure of the DOM tree shows that the next peer node of the p element is ul. Therefore, you can use the next () method to obtain the ul element. The Code is as follows:

Var $ p1 = $ ("p"). next (); // peer element next to the p element

Prev () method

This method is used to obtain the peer element adjacent to the matching element. The structure of the DOM tree shows that the last peer node of the ul element is p. Therefore, you can use the prev () method to obtain the p element. The Code is as follows:

Var $ ul = $ ("ul"). prev (); // peer element next to the ul Element

Siblings () method

This method is used to obtain all peer elements before and after matching elements. Take the structure of the DOM tree as an example. Ul and p are peer elements, and the three li elements under ul are also peer elements.

To obtain the peer element of element p, you can use the following code:

Var $ p2 = $ ("p"). siblings (); // unique peer element next to element p

Closest () method

It is used to obtain the latest Matching Element. First, check whether the current element matches. If yes, the element itself is returned. If no match exists, the parent element is searched up until the element matching the selector is found. If nothing is found, an empty JQuery object is returned.

For example, to add a color to the nearest li element of the clicked target element, you can use the following code:

$(document).bind("click", function (e) {  $(e.target).closest("li").css("color","red"); })

In addition, there are many methods to traverse nodes in JQuery, such as find (), filter (), nextAll (), prevAIl (), parent (), and parents, I will not go into details here. You can refer to the JQuery quick query table document in the appendix. It is worth noting that these DOM traversal methods share one thing in common and can use JQuery expressions as their parameters to filter elements.

I hope this article will help you with jQuery programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.