#转载请留言联系

从一个简单的例子引入，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. pdfmake实现中文支持，解决中文乱码问题

    引言:当初自己为了在项目中bootstrap-table中实现导出pdf,使用的pdfmake,但是pdfmake默认使用的不是中文字体,实现pdfmake使用中文字体主要就是编译新的vfs_font ...

  2. 15.6，redis主从同步

    redis主从同步 原理:1. 从服务器向主服务器发送 SYNC 命令.2. 接到 SYNC 命令的主服务器会调用BGSAVE 命令,创建一个 RDB 文件,并使用缓冲区记录接下来执行的所有写命令.3 ...

  3. Python数据类型一

    一.整型 在Python内部对整数的处理分为普通整数和长整数,普通整数长度为机器位长,通常都是32位,超过这个范围的整数就自动当长整数处理,而长整数的范围几乎完全没限制Python可以处理任意大小的整 ...

  4. libmt.so: undefined reference to `av_find_stream_info@LIBAVFORMAT_53'

    [root@localhost instance]# make gcc -O3 -g -I/usr/include/ -I/usr/include/glib- -fexceptions -fstack ...

  5. Xcode坑之一Invalid argument

    Xcode坑之一Invalid argument 正在搞代码,运行程序时突然发现程序不能再次运行了,一运行就提示Invalid argument 然后FQ各种查啊,试了好多方法都不行,重启,重置,我用 ...

  6. postman与charles的结合使用

    1.准备charles环境 Charles端口一般配置的为8888,不知道怎么配置详见charles文档 打开charles,发现访问浏览器任意页面都是失败. 在浏览器的高级设置中设置代理服务器,以火 ...

  7. 孤荷凌寒自学python第六十天在windows10上搭建本地Mongodb数据服务

     孤荷凌寒自学python第六十天在windows10上找搭建本地Mongodb数据服务 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第六天.成功在本地搭建了windows ...

  8. 201621123033 《Java程序设计》第1周学习总结

    1. 本周学习总结 · jdk.jre.jvm的含义及相关概念(具体见下文回答) · 会使用记事本及简单编辑器编写Java程序,理解javac和java命令的含义(具体见下文回答) · java与C语 ...

  9. PHP生成随机数函数rand(min,max)

    rand(min,max):生成min到max 的随机数,注意:包括边界rand() 返回 0 到 RAND_MAX 之间的伪随机整数.例如,想要 5 到 15(包括 5 和 15)之间的随机数,用 ...

  10. 【ZBH选讲·树变环】

    [问题描述] 你是能看到第三题的friends呢.——aoao 树是个好东西,删掉树一条边要1的代价,随便再加一条边有1的代价,求最小的代价把树变成环.[输入格式] 第一行一个整数,代表树的点数.接下 ...