首页
话题
消息
手册
我的
返回介绍

jQuery.each()

发布于 2017-09-11 字数3492 浏览 1154 评论 0

所属分类:工具类

jQuery.each( collection, callback(indexInArray, valueOfElement) )返回: Object

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

  • 添加的版本: 1.0jQuery.each( collection, callback(indexInArray, valueOfElement) )

    • collection
      类型: Object

      遍历的对象或数组。

    • callback(indexInArray, valueOfElement)
      类型: Function()
      该函数会在每次迭代时被调用。

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

$.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语句,这意味着,它会立即跳出当前的迭代,转到下一个迭代。

例子:

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

<!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="http://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>

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

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

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

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

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!