JQuery search for child elements find() and traverse the collection each method example sharing

This article mainly brings you a summary of JQuery's method of finding sub-elements find() and traversing the collection each. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let's follow the editor and take a look. I hope that everyone can better master the use of find() and traversing the collection each.

1.HTML code

<p name="students" school="HK"> 
 <input type="boy" name="ZhangSan" value="206"> 
 <input type="girl" name="Lisi" value="108"> 
 </p>

2.jquery

<script type="text/javascript"> 
 /* find() 查找子元素方法 */ 
 var aaa = $("p[name='students'][school='HK']").find("input[type='boy'][name='ZhangSan']"); 
 console.log(aaa.val()); 
  
 /* $(".child",parent); 方法查找子元素*/ 
 var bbb = $($("input[type='boy'][name='ZhangSan']"),$("p[name='students'][school='HK']")); 
 console.log(aaa.val()); 
 
 /* each()方法遍历数组 */ 
 var arr = [ "one", "two", "three", "four" ]; 
 $.each(arr, function() { 
  console.log(this); 
 }); 
  
 /* each()方法处理json */ 
 var obj = { 
  one : 1, 
  two : 2, 
  three : 3, 
  four : 4 
 }; 
 $.each(obj, function(key, val) { 
  console.log(obj[key]); 
 }); 
  
 /* each()方法处理二维数组 */ 
 var arr1 = [ [ 11, 44, 33 ], [ 4, 6, 6 ], [ 7, 20, 9 ] ] 
 $.each(arr1, function(i, item) { 
  console.log(item[0]); 
 }); 
 
 /* each()方法处理HTML元素 */ 
 $("p[name='students'][school='HK'] > input").each(function() { 
  console.log($(this).val()); 
 }); 
 </script>

Related recommendations:

find() and filter() in jQuery ) Detailed explanation of operation usage examples

Usage examples of find() method in jQuery

focusin(), focus() and find() in jQuery The difference between children()

The above is the detailed content of JQuery search for child elements find() and traverse the collection each method example sharing. For more information, please follow other related articles on the PHP Chinese website!