How to traverse nodes with jquery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to traverse nodes with jquery

coldplay.xixi

Nov 16, 2020 pm 01:44 PM

jquery

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.

How to traverse nodes with jquery

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=&#39;苹果&#39;>苹果</li> 
       <li title=&#39;橘子&#39;>橘子</li> 
       <li title=&#39;菠萝&#39;>菠萝</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.

How to traverse nodes with jquery

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

elements under the

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn