Shulou(Shulou.com)06/01 Report--

This article is to share with you about the ways to traverse nodes in jquery. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Jquery can traverse the node by: 1, children (), can return all direct child elements; 2, next (), can return the next sibling element of the selected element; 3, nextAll (), can return all sibling elements after the selected element; 4, prev (); 5, siblings (), and so on.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Summary of jQuery traversal node method

1. Children () method: $('p') .children ()-traverses to find all child element nodes of p element

Hello

Hello, Hello Again!

And Again

$('div'). Children (); / / Hello Again Hello!

$('div'). Children (' .box') / / Hello!

2. Next () method: $('p') .next ()-find the adjacent sibling elements after the p element, but not all sibling elements

[related methods]

(1) nextAll () method: $('p') .nextAll ()-find all sibling elements after p

(2) nextUntil () method: $('p'). NextUntil ('p')-find all sibling elements after p until p element

Hello

Hello Again

And Again $('p') .next (); / /

Hello Again

And Again $('p') .next ('.box'); / / Hello Again

3. Prev () method: $('p') .prev ()-find the sibling elements adjacent to p

[related methods are]

(1) prevAll () method: $('p') .prevAll ()-find all sibling elements before p

(2) prevUntil () method: $('p'). PrevUntil ('p')-find all elements up to p element before p

Hello

Hello Again

And Again

$('p'). Prev (); / / Hello Again

4. Siblings () method: $('p') .siblings ()-find all sibling elements before and after p

5. The ind () method: $('p') .find ('span')-find the child element within the p element and is the span element

6. Eq () method: $('p') .eq (1)-find the second p element (index subscript starts at 0)

7. First () method: $('li') .first ()-get the first li element

8. The last () method: $('li') .last ()-gets the last li element

9. The filter () method: $('p'). Filter ('.box')-get the p element named box

10. Is () method: $('.box'). Is ('p')-determine whether .box is a p element

11. The map () method: $('p') .map (callback)-- executes the callback function for each p

Example: traverse the input element to get its value value separated by "," and add it to the end of the p element

Values:

$("p") .append ($("input") .map (function () {return $(this). Val ();}) .get () .join (",")); / /

John, password, http://ejohn.org/

12. The hasClass () method: $('p') .hasClass ('box')-find the p that contains the class name box

13. The has () method: $('p') .has ('span')-find the p element that contains the span element

14. Not () method: $('p') .not ('span')-find p elements that do not contain span elements

15. The slice () method: $('p'). Slice (0Power2)-find the first p element to the third p element

16. OffsetParent () method: $('p') .offsetParent ()-find the first located ancestor element of p element

17. The parent () method: $('p') .parent ()-returns the collection of elements containing the unique parent node of the p element

18. The parents () method: $('p') .parent ()-returns all ancestor nodes containing p elements (excluding the root node)

19. ParentUntil () method: $('p'). ParentUntil ('# box')-find the ancestor element of p element until # box

20. The contents () method: $('p') .contents ()-returns all child nodes within the p element (including text nodes)

21. The end () method: $('p'). Find ('span'). End ()-changes the body of the statement back to the previous state, that is, after finding the span element, the focus returns to the p element

Hello, how are you? $('div'). Find (' span'). AddClass ('test'). End (). Attr (' title','title1'); / / span add class=test;div add title=title1 thank you for reading! This is the end of the article on "is there any way to traverse nodes in jquery"? I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.