Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
