JQuery tree structure selector _ jquery

If the node in the tree structure is not the root or the last branch, it must have its parents and children. The DOM structure is also a Tree structure. The Tree selector provided by jQuery can be used to select nodes in the DOM Tree. The tree selector methods include children (), parent (), parents (), next (), prev (), and siblings ().
Select "child"-children () for an element ()

The Code is as follows:

• First column


• Column 2


• Column 3

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

Select "parent"-parent () for an element ()

The Code is as follows:

• First column


• Column 2


• Column 3

$ ("# Son1"). parent (). attr ("id"); // obtain ul's ID-"parent"

Select the "ancestor"-parents () of an element (Note: Select Level 1 and above)

The Code is as follows:

• First column


• Column 2


• Column 3

$ ("# Son2"). parents (). each (function (I ){
If (I <3) // only display 3 generations of ancestor
Alert(%(this%.html ());
});

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

The Code is as follows:

• First column


• Column 2


• Column 3

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

Prev ()

The Code is as follows:

• First column


• Column 2


• Column 3

$ ("# Son2"). prev (). text (); // select # son1 select the "brother" of an element"

Siblings ()

The Code is as follows:

• First column


• Column 2


• Column 3

$ ("# Son2"). siblings (). text (); // select # son1 and # son3