#转载请留言联系

从一个简单的例子引入，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. android singleTop 不起作用

    今天,排查问题,发现设置了singleTop 的activity, 多次启动依然是多个acitivity,而不是一个. 明明在清单里面设置了,但是就是启动了多个. 可能是因为启动的太快,导致系统判断有 ...

  2. 虚拟机中如何挂载物理磁盘(VMware操作)

    测试的时候难免会遇到,从真是机器拷贝东西到虚拟机中,虽说安装了VMware tools(Vm→Install VMware tools...),就可以将文件直接拖到虚拟机里面去,但是这样拷贝总是需要花 ...

  3. Pascal数据结构与算法

    第一章 数据结构与算法的引入 1.1 数据结构的基本概念 一. 学习数据结构的意义 程序设计 = 数据结构 + 算法 目前,80%的待处理的数据具有“算法简单”(四则运算.检索.排序等),“对象复杂” ...

  4. http客户端缓存

    这篇文章写得比较,点击查看

  5. appium-手势密码实现-automationName 是Appium的情况

    1. 红色区域的范围为:[66,575][1014,1523], 由于这块是一个整块,所以无法使用每个点的数据:因此只能使用LockPatternView对象拿到左上角的坐标值 2.  原理, 将九宫 ...

  6. Windows7中如何让python2和python3共存并使用pip

    1.下载安装python2和python3 分别下载python2.7.exe.python3.6.exe并安装到C盘.E盘(如图)     2.配置环境变量 打开“系统变量”中的path文本框(如图 ...

  7. 【转载】Unity3D研究院之共享材质的巧妙用法（sharedMaterial效率问题）

    如果你需要修改模型材质的颜色,或者是修改材质Shader的一些属性, 通常情况是用获取模型的Renderer组件,然后获取它的material属性. 举个简单的例子,修改颜色或者直接更换shader ...

  8. Ext JS 的一个非常好的学习网站

    起飞网 http://www.qeefee.com/zt-extjs 发现一个非常好的学习ExtJS的中文网站

  9. $this和self、parent这三个关键词分别代表什么？在哪些场合下使用？

    $this:当前对象 self: 当前类 parent: 当前类的父类 $this在当前类中使用,使用->调用属性和方法. self也在当前类中使用,不过需要使用::调用. 静态属性,不能在类里 ...

  10. 聊聊Python中的GIL

    对于广大写Python的人来说,GIL(Global Interpreter Lock, 全局解释器锁)肯定不陌生,但未必清楚GIL的历史和全貌是怎样的,今天我们就来梳理一下GIL. 1. 什么是GI ...