JQuery method of traversing DOM nodes_jquery-JS Tutorial-php.cn

JQuery method of traversing DOM nodes_jquery

WBOY

Release： 2016-05-16 15:55:40

Original

1346 people have browsed it

The example in this article describes how JQuery traverses DOM nodes. Share it with everyone 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, replacement, etc. Here are some methods on how to traverse nodes, select adjacent nodes, etc.

children() method

This method is used to obtain the set of child elements of the matching element. According to the structure of the DOM tree, you can know the relationship between each element and the number of their child nodes.

The following uses the children() method to get the number of all child elements of the matching element.

var $body = $("body").children(); 
var $p = $("p").children(); 
var $ul = $("ul").children(); 
alert( $body.length ); // <body>元素下有2个子元素 
alert( $p.length );  // <p>元素下有0个子元素 
alert( $ul.length ); // <p>元素下有3个子元素 
for(var i=0;i< $ul.length;i++){ 
  alert( $ul[i].innerHTML ); 
}

Copy after login

PS: The children() method only considers child elements and does not consider any descendant elements.

next() method

This method is used to obtain the sibling elements immediately behind the matching element. From the structure of the DOM tree, we can know that the next sibling node of the p element is ul, so the ul element can be obtained through the next() method. The code is as follows:

var $p1 = $("p").next();
// 紧邻p元素后的同辈元素

Copy after login

prev() method

This method is used to obtain the sibling elements immediately before the matching element. From the structure of the DOM tree, we can know that the previous sibling node of the ul element is p, so we can obtain the p element through the prev() method. The code is as follows:

var $ul = $("ul").prev();
// 紧邻ul元素前的同辈元素

Copy after login

siblings() method

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

If you want to get the sibling elements of the p element, you can use the following code:

var $p2 = $("p").siblings();
// 紧邻p元素的唯一同辈元素

Copy after login

closest() method

It is used to get the nearest matching element. First check whether the current element matches, and if so, return the element itself directly. If there is no match, search up the parent element, step by step, until an element matching the selector is found. If nothing is found, an empty JQuery object is returned.

For example, to add 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"); 
})

Copy after login

In addition, there are many methods for traversing nodes in JQuery, such as find(), filter(), nextAll(), prevAIl(), parent() and parents(), etc., which will not be described here. , readers can view the JQuery cheat sheet document in the appendix. It is worth noting that these DOM traversal methods have one thing in common, they can all use JQuery expressions as their parameters to filter elements.

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