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><p>您好!</p>

<p>And Again</p>
<script>
  $(&#39;p&#39;).children();   //<span>Hello Again<p class="box">您好!
  $(&#39;p&#39;).children(&#39;.box&#39;)  //<p class="box">您好!
</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>Hello Again</p>
<p>
  <span>And Again</span>
</p>
<script>
  $(&#39;p&#39;).next();   //<p>Hello Again<p><span>And Again
  $(&#39;p&#39;).next(&#39;.box&#39;);  //<p class="box">Hello Again
</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>
  $(&#39;p&#39;).prev();  //<p><span>Hello Again
</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>

     

<script> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); //<p>John, password, http://ejohn.org/ </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>
  $(&#39;p&#39;).find(&#39;span&#39;).addClass(&#39;test&#39;).end().attr(&#39;title&#39;,&#39;title1&#39;);
  //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!