Summary of jQuery node traversal methods

This article mainly collects and sorts out the methods of jQuery traversing nodes, so that everyone can have a clearer understanding of jQuery traversing nodes. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

1.children() method:$('p').children()---Traverse and find all child element nodes of the p element

<p>Hello</p>
<p>
  <span>Hello Again</span>
  <p class="box">您好!</p>
</p>
<p>And Again</p>
<script type="text/javascript">
  $('p').children();   //<span>Hello Again</span><p class="box">您好!</p>
  $('p').children('.box')  //<p class="box">您好!</p>
</script>

2.next() method:$ ('p').next() --- Find 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 up to the p element

<p>Hello</p>
<p class="box">Hello Again</p>
<p>
  <span>And Again</span>
</p>
<script type="text/javascript">
  $('p').next();   //<p>Hello Again</p><p><span>And Again</span></p>
  $('p').next('.box');  //<p class="box">Hello Again</p>
</script>

3.prev() method:$('p').prev() ----Find the adjacent elements before p Sibling elements

[Related methods include]

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

　(2)prevUntil() method:$('p').prevUntil('p') --- Find all elements before p until p element

<p>Hello</p>
<p>
  <span>Hello Again</span>
</p>
<p>And Again</p>
<script type="text/javascript">
  $('p').prev();  //<p><span>Hello Again</span></p>
</script>

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

5.find() method: $('p').find('span' ) ---- Find the sub-element within the p element and it is a span element

6.eq() method: $('p').eq(1) --- Find the second p element (under index The index starts from 0)

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

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

9.filter() method:$('p').filter('.box') --- Get the class p element named box

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

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

Example: Traverse the input element to obtain its value separated by "," and add it to

<p><b>Values: </b></p>
<form>
 <input type="text" name="name" value="John"/>
 <input type="text" name="password" value="password"/>
 <input type="text" name="url" value="http://ejohn.org/"/>
</form>
<script type="text/javascript">
  $("p").append( $("input").map(function(){
     return $(this).val();
    }).get().join(", ") );  //<p>John, password, http://ejohn.org/</p> 
</script>

12.hasClass() method inside the p element: $('p').hasClass('box') ---- Find p

13 with the class name box .has() method: $('p').has('span') ---- Find p elements containing span elements

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

15.slice() method:$('p').slice(0,2) --- - Find the first p element to the third p element

16.offsetParent() method: $('p').offsetParent() --- Find the first positioned ancestor of the p element Element

17.parent() method:$('p').parent() ---- Returns the element collection containing the only parent node of the p element

18.parents() Method: $('p').parent() ---- Returns all ancestor nodes containing the p element (excluding the root node)

19.parentUntil() method: $('p'). parentUntil('#box') ---- Find the ancestor elements of p element until #box

20.contents() method:$('p').contents() --- Return p All child nodes within the element (including text nodes)

21.end() method:$('p').find('span').end() ---- Change the body of the statement to Return to the previous state: after finding the span element, the focus returns to the p element

<p>
  <span>Hello</span>,
  how are you?
</p>
<script type="text/javascript">
  $('p').find('span').addClass('test').end().attr('title','title1');
  //span添加class=test;p添加title=title1
</script>

Related recommendations:

Detailed explanation of jQuery's ability to dynamically add nodes and traverse nodes

Jquery small collection of methods for traversing nodes_jquery

jQuery loop traversal to change the href of a tag

The above is the detailed content of Summary of jQuery node traversal methods. For more information, please follow other related articles on the PHP Chinese website!