Jquery method of traversing nodes: 1. Use the [children()] method to match the set of child elements of the element; 2. Use the [next()] method to match the sibling elements immediately behind the element; 3. Use [prev ()] method matches the sibling elements immediately preceding the element.
The operating environment of this tutorial: windows10 system, jquery2.2.4, this article is applicable to all brands of computers.
Recommended: "jquery video tutorial"
jquery method of traversing nodes:
1, children( )Method
This method is used to obtain the set of child elements of the matching element.
Use 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"); //<ul>元素下有3个子元素
for(var i=0;len=$ul.length;i<len;i++)<br>{
alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容
}2. next() method
This method is used to obtain the sibling elements immediately behind the matching element.
var $p1=$("p").next;//Get the sibling elements immediately after the
element
The result will be:
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>3. prev() method
This method is used to obtain the sibling elements immediately before the matching element
It can be obtained from the structure of the dom tree We know that the previous sibling node of the
, so we can obtain the
element through the prev() method. The code is as follows:
var $ul=$( "ul").prev();//Get the sibling element immediately before the
The result will be:
<p title ="Choose your favorite fruit.">What is your favorite fruit? </p>
4. Siblings() method
This method is used to obtain all sibling elements before and after the matching element.
The siblings() method was used in the above code. It was to obtain the sibling nodes of the matching element, that is, to obtain the sibling elements of the matching element.
Take the structure of the DOM tree as an example. The
element are sibling elements of each other, and the three
If you want to get the sibling elements of the
element, you can use the following code:
var $p2=$("p").siblings();//Get the sibling elements immediately adjacent to the
element
The result obtained is:
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>5, closest()
It uses 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");
})Related free learning recommendations: JavaScript (video )
The above is the detailed content of How to traverse nodes with jquery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
