jQuery tree structure selector_jquery

The DOM structure is actually a tree structure. The tree selector provided by jQuery can be used to select nodes in the DOM Tree. The methods of these tree selectors include: children(), parent(), parents(), next(), prev(), siblings().
Select the "children" of an element - children()

Copy code The code is as follows:

< ;li id="son1">First column

• Second column


• 
  

$("#parent").children().length //Get the number of all "children" (li), "3 ”
$("#parent").children("#son1").text(); //Get the value of the first "child" (li) - "first column"

Select the "parent" of an element - parent()

Copy code The code is as follows:

• First column


• Second column


• Third column

$("#son1").parent().attr ("id");//Get the ID of ul - "parent"

Select the "ancestors" of a certain element -parents() (Note: Select upwards one level at a time until

Copy code The code is as follows:

• First column


• Second column


• Third column

$("#son2 ").parents().each(function(i){
if(i<3) //Only display 3 generations of ancestors
alert($(this).html());
}) ;

Select the "younger brother" of an element - next()

Copy code The code is as follows :

• First column


• Second column


• Third column

$("#son2" ).next().text(); //Select #son3 to select the "brother" of an element

prev()

Copy the code The code is as follows:

• First column< ;/li>
  
• Second column


• Third column

< ;/ul>
$("#son2").prev().text(); //Select #son1 to select the "brothers" of an element

siblings()

Copy code The code is as follows:

< ;li id="son1">First column

• Second column


• 
  

$("#son2").siblings().text(); //Select #son1 and #son3

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