JQ-$.each()方法使用

我不是女神ヾ 2022-05-20 07:38 124阅读 0赞

jQuery的$.each()函数是全局函数，用于循环遍历jQuery对象的每个元素，它对于多元素DOM操作，循环任意数组和对象属性非常有用。  
除了这个函数之外，jQuery还提供了一个具有相同名称的辅助函数，可以在不事先选择或创建DOM元素的情况下调用它。

**语法**

$.each(object,[callback]);

**参数**

object :需要遍历的对象或数组。

callback：每个成员/元素执行的回调函数，可选参数。格式为function(i,item)\{\}，i和item是可选参数，其中i为对象的属性或数组的索引，item为对应属性或索引的值。如果需要退出each循环可使回调函数返回 false，其它返回值将被忽略。

**1.获取a元素的href属性**

$('a').each(function (index, value){ 
      console.log($(this).attr('href'));
    });

**2.输出数组对象数据**

var numbers = [1, 2, 3, 4, 5, 6];
    $.each(numbers , function (index, value){ 
      //index是数组索引
      console.log(index + ':' + value); 
    });

输出结果：0:1, 1:2, 2:3, 3:4, 4:5, 5:6

**3.输出Json对象数据**

var json = [ 
     { 'red': '#f00' },
     { 'green': '#0f0' },
     { 'blue': '#00f' }
    ];
    //JS输出：
    for (var key in json) {
        if (p.hasOwnProperty(key)) {
            console.log(key + " -> " + p[key]);
        }
    }
    
    $.each(json, function () { 
       $.each(this, function (name, value) { 
          console.log(name + '=' + value);
       });
    });

输出结果：red=\#f00, green=\#0f0, blue=\#00f

**比较**  
JQuery还提供了另一个方法$(selector).each()，是对象方法，用途是遍历DOM元素，为每个匹配元素规定运行的函数。

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关 RealTimeSync 使用方法

一、功能定期扫描某个文件夹并执行某个命令二、例子 ![f030e929cc23b5a0bb053f8da689f5dd.png][] [f030e929c

小灰灰/ 2022年11月15日 03:55/ 0 赞/ 597 阅读

相关 Leveldb使用方法

原文地址：[https://rawgit.com/google/leveldb/master/doc/index.html][https_rawgit.com_google_l

梦里梦外;/ 2022年08月18日 12:08/ 0 赞/ 171 阅读

相关 crontab使用方法

http://baike.baidu.com/view/1229061.htm?fr=aladdin 基本格式 : \　　\　　\　　\　　\　　command

淡淡的烟草味﹌/ 2022年08月10日 15:58/ 0 赞/ 148 阅读

相关 PowerDesigner使用方法

1.现在开始使用PowerDesigner创建数据库,首先运行程序,进入主界面: ![2010061319271315.jpg][] 2.File—New Model—Ph

古城微笑少年丶/ 2022年08月07日 03:51/ 0 赞/ 172 阅读

相关 EntityManager使用方法

EntityManager ![\[转载\]EntityManager使用方法][EntityManager]转载 Session bean or MD be

亦凉/ 2022年06月17日 12:45/ 0 赞/ 301 阅读

相关方法listview使用

最近学习安卓，学了一段时间，感觉很乱，现在开始把每一个功能单独集合一下这篇博文介绍listview，完整代码很适合我这样的新手看， 1、首先是activity\_mai

桃扇骨/ 2022年06月17日 08:42/ 0 赞/ 145 阅读

相关 rTorrent使用方法

[Linux BT下载软件 — Rtorrent 配置使用][Linux BT_ _ Rtorrent] [rtorrent - 强大的命令行BT客户端][rtorrent

待我称王封你为后i/ 2022年06月10日 07:44/ 0 赞/ 313 阅读

相关 OkHttp使用方法

一.概述 [Okhttp][]集成有多种，一种就是直接下载它的jar包但是并不推荐，一种是Maven方式去构建，这种在java程序里用的会比较多 <depe

Love The Way You Lie/ 2022年05月19日 04:48/ 0 赞/ 325 阅读

相关 UriComponentsBuilder 使用方法

UriComponentsBuilder 是 Spring 提供的一个 UriComponents 类的构建类,通过他可以方便的构建我们请求的 url Maven包: <

电玩女神/ 2021年10月19日 23:40/ 0 赞/ 656 阅读

相关 PageHelper使用方法

第一步：先在pom.xml中添加如下 <properties> <pagehelper-version>5.0.0</pagehelper-versi

超、凢脫俗/ 2021年10月15日 01:29/ 0 赞/ 590 阅读