• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • jQuery.each()

    一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。

    jQuery.each(array, callback)
    • array类型: Array。遍历的数组。
    • callback类型: Function(Integer indexInArray, Object value)该函数会在每个对象上(迭代)调用。
    jQuery.each(object, callback)
    • object类型: Object。遍历的对象。
    • callback类型: Function(String propertyName, Object valueOfProperty)该函数会在每个对象上(迭代)调用。

    $.each()函数和$(selector).each()是不一样的,那个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或数组。在迭代数组的情况下,回调函数每次传递一个数组索引和相应的数组值作为参数。(该值也可以通过访问this关键字得到,但是JavaScript将始终将this值作为一个Object,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象。

    注意:$.each()函数会在内部检索并且使用传递集合的length属性。所以,如果集合有一个名为length的属性-比如{bar:'foo', length: 10}-这个函数可能无法正常工作。

    $.each([52, 97], function(index, value) {
      alert(index + ': ' + value);
    });
    

    这将产生两个信息:

    0: 52
    1: 97

    如果对象是作为集合使用,回调函数每次传递一个键值对的:

    var obj = {
      "flammable": "inflammable",
      "duh": "no duh"
    };
    $.each( obj, function( key, value ) {
      alert( key + ": " + value );
    });
    

    再次,这将产生两个信息:

    flammable: inflammable
    duh: no duh

    我们可以在$.each()返回false来终止迭代。返回非false相当于一个循环中的continue语句,这意味着,它会立即跳出当前的迭代,转到下一个迭代。

    例子

    对数组进行迭代,迭代过程中同时显示关键字及数值

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.each demo</title>
      <style>
      div {
        color: blue;
      }
      div#five {
        color: red;
      }
      </style>
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
     
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
     
    <script>
    var arr = [ "one", "two", "three", "four", "five" ];
    var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
     
    jQuery.each( arr, function( i, val ) {
      $( "#" + val ).text( "Mine is " + val + "." );
     
      // Will stop running after "three"
      return ( val !== "three" );
    });
     
    jQuery.each( obj, function( i, val ) {
      $( "#" + i ).append( document.createTextNode( " - " + val ) );
    });
    </script>
     
    </body>
    </html>
    

    迭代一个数组,并同时访问迭代的元素及它的索引值。

    $.each( ['a','b','c'], function(i, l){
       alert( i + ": " + l );
     });
    

    在一个元素的属性上进行迭代,并同时访问它的键及值。

    $.each( { name: "John", lang: "JS" }, function(k, v){
       alert( "Key: " + k + ", Value: " + v );
     });