#转载请留言联系

从一个简单的例子引入，jQuery里的each有什么作用？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

            $('#list li').css({'background':"blue"});

            console.log($('#list li').html())

        })

    </script>

</head>

<body>

    <ul id="list">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</body>

</html>

打开网页的效果是，列表的每一项背景色都变成蓝色了，但是终端只能输出列表第一项的值1。这是为什么呢？

原因就是，$('#list li').css({'background':"blue"});这句jQuery代码，里面实际上本质上还是js的循环在完成多个元素的背景修改。

而获取元素时内部没有循环，当我们需要获取列表的元素时，就需要使用循环或者用each关键词了！

1.使用循环。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

            for(var i=0;i<$('#list li').length;i++){

                console.log($('#list li').eq(i).html())

            }

        })

    </script>

</head>

<body>

    <ul id="list">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</body>

</html>

终端输出：

1

2

3

4

5

2.使用each关键词

语法：

$(selector).each(function(index,element))
参数 描述
function(index,element)

必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置
  • element - 当前的元素（也可使用 "this" 选择器）

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

            $('#list li').each(function(i,ele){

                console.log($(ele).html())

            })

        })

    </script>

</head>

<body>

    <ul id="list">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</body>

</html>

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等
在开发过程中使用$each可以大大的减轻我们的工作量。

jQuery中的each关键词的更多相关文章

  1. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  2. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  3. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  4. jQuery实现高亮显示网页关键词的方法

    本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你 ...

  5. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()

    本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  8. JQuery中ajax的相关方法总结

    前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...

  9. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

随机推荐

  1. Windows usb设备正在使用中

    每次插上u盘之后,弹出的时候,总是提示正在使用中.后来我发现了技巧, 1.打开任务管理器 2.打开底部的 打开资源监视器 按钮 3.然后点击磁盘 4.再次弹出usb 就可以弹出了.

  2. hadoop中namenode发生故障的处理方法

    Namenode 故障后,可以采用如下两种方法恢复数据: 方法一:将 SecondaryNameNode 中数据拷贝到 namenode 存储数据的目录: 方法 二: 使用 -importCheckp ...

  3. python开发记录第一篇

    1. 安装pyCharm,下载地址https://www.jetbrains.com/pycharm/ 2. 注册license,修改windwos系统hosts,文件路径为:C:\Windows\S ...

  4. LC.exe已退出，代码为-1

    解决方法就是把Properties文件下的license.licx给删除,重新编译,这样就可以了.

  5. 第二阶段团队冲刺-five

    昨天: 用servlet完成名单打印功能. 今天: 完成打印名单的功能. 遇到的问题: 在jsp中调用java方法与在main函数中的测试结果一致.

  6. UVALive 5027 二分图 EK

    C - Card Game Crawling in process...Crawling failedTime Limit:3000MS    Memory Limit:0KB    64bit IO ...

  7. restorator 运行后其他所有EXE文件都无法运行的解决方案

    昨天要反编译一个EXE,用RESTORATOR来查看资源罗列情况,倒霉的事情发生了,所有EXE文件点右键后‘打开’都没有了,刚开始以为中度了,进安全模式看,发现文件都没有异常,并且在安全模式下问题照样 ...

  8. FreeBSD NTP 简单使用

    FreeBSD NTP 简单使用 来源 https://blog.csdn.net/stevexk/article/details/1349506 1.ntptrace xxx.xxx.xxx.xxx ...

  9. [codevs1746][NOI2002]贪吃的九头龙

    [codevs1746][NOI2002]贪吃的九头龙 试题描述 传说中的九头龙是一种特别贪吃的动物.虽然名字叫"九头龙",但这只是说它出生的时候有九个头,而在成长的过程中,它有时 ...

  10. [bzoj] 1085 骑士精神 || ID-DFS

    原题 找到最少的步数成为目标状态. IDDFS(限制层数的dfs)即可 #include<cstdio> #include<algorithm> using namespace ...