What methods are there to traverse nodes in jquery?

The jquery methods that can traverse nodes are: 1. children(), which can return all direct child elements; 2. next(), which 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.

JQuery node traversal method summary

1. children() method: $('p').children()---Traverse to find p elements All child element nodes

<p>Hello</p>
<div>
  <span>Hello Again</span>
  <p class="box">您好!</p>
</div>
<p>And Again</p>
<script type="text/javascript">
  $(&#39;div&#39;).children();   //<span>Hello Again</span><p class="box">您好!</p>
  $(&#39;div&#39;).children(&#39;.box&#39;)  //<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 everything after p Sibling elements

　(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>
<div>
  <span>And Again</span>
</div>
<script type="text/javascript">
  $(&#39;p&#39;).next();   //<p>Hello Again</p><div><span>And Again</span></div>
  $(&#39;p&#39;).next(&#39;.box&#39;);  //<p class="box">Hello Again</p>
</script>

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

　[Related methods are]

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

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

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

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

5. ind() method: $('p').find('span') ---- Find sub-elements within the p element that are span elements

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

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

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

9, filter() method: $('p').filter('.box') --- Get the p element with the class name 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 and add it to the back of the p element separated by ","

<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: $('p').hasClass('box') ---- Find p

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

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

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 element of the p element

17. parent() method: $ ('p').parent() ---- Returns the element set containing the unique 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 p element Ancestor elements until #box

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

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

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

[Recommended learning: jQuery video tutorial, web front-end]

The above is the detailed content of What methods are there to traverse nodes in jquery?. For more information, please follow other related articles on the PHP Chinese website!