.each(function)
-
functionType: Function( Integer index, Element element )A function to execute for each matched element.
- exmple
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>each demo</title> 6 <style> 7 div { 8 40px; 9 height: 40px; 10 margin: 5px; 11 float: left; 12 border: 2px blue solid; 13 text-align: center; 14 } 15 span { 16 color: red; 17 } 18 </style> 19 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 20 </head> 21 <body> 22 23 <button>Change colors</button> 24 <span></span> 25 <div></div> 26 <div></div> 27 <div></div> 28 <div></div> 29 <div id="stop">Stop here</div> 30 <div></div> 31 <div></div> 32 <div></div> 33 34 <script> 35 $( "button" ).click(function() { 36 $( "div" ).each(function( index, element ) { 37 // element == this 38 $( element ).css( "backgroundColor", "yellow" ); 39 if ( $( this ).is( "#stop" ) ) { 40 $( "span" ).text( "Stopped at div index #" + index ); 41 return false; 42 } 43 }); 44 }); 45 </script> 46 47 </body> 48 </html>
jQuery.each()
-
jQuery.each( array, callback )
-
arrayType: ArrayThe array to iterate over.
-
callbackType: Function( Integer indexInArray, Object value )The function that will be executed on every object.
-
jQuery.each( object, callback )
-
objectType: ObjectThe object to iterate over.
-
callbackType: Function( String propertyName, Object valueOfProperty )The function that will be executed on every object.
-
Examples
1 Iterates over items in an array, accessing both the current item and its index. 2 3 $.each( [ "a", "b", "c" ], function( i, l ){ 4 alert( "Index #" + i + ": " + l ); 5 }); 6 7 Iterates over the properties in an object, accessing both the current item and its key. 8 9 $.each({ name: "John", lang: "JS" }, function( k, v ) { 10 alert( "Key: " + k + ", Value: " + v ); 11 });
以上。
在一些使用迭代方法生成html文档的地方，使用用each函数会事半功倍。
项目代码：(仿PHP官网搜索框部分代码)
1 $('#search_doc').on("keyup",function(){ 2 //remove and add the title ,make the title show before tt-dataset 3 $('div.tt-menu h3').each(function(){ 4 var $dataset = $(this); 5 var dataset_clo = $dataset.closest('.tt-dataset'); 6 // locate the tag h3 7 if(dataset_clo.prev().is('h3')){ 8 dataset_clo.prev().remove(); 9 }else if($dataset.next().text() == ''){ 10 $dataset.remove(); 11 } 12 // if the category has content,then insert the title before the tt-dataset 13 if(dataset_clo.has('a').length){ 14 $dataset.insertBefore(dataset_clo); 15 } 16 }); 17 });