#转载请留言联系

从一个简单的例子引入，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. STM8 输出比较极性

    PWM输出的信号极性有两个选项决定,一个选项是PWM模式,另一个选项是输出极性控制位. 请看定时器的框图,PWM模式的选择决定OC1REF的极性, 例如当选择PWM1模式时,OC1REF信号是&quo ...

  2. java程序——凯撒加密

    古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报: 请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图.   设计思想:输入一个字符串,然后将其中每 ...

  3. linux 广播

    广播是一台主机向局域网内的所有主机发送数据.这时,同一网段的所有主机都能接收到数据.发送广播包的步骤大致如下: (1)确定一个发送广播的接口,如eth0 (2)确定广播的地址,通过ioctl函数,请求 ...

  4. mongodb导入json文件（WINDOWS）

    mongodb导入json格式的文件的命令是mongoimport: 在下面的这个例子中,使用mongoimport命令将文件pi.json中的内容导入loacal数据库的pi集合中. 打开CMD,进 ...

  5. Flask 教程精简版之一（系列片）

    Flask 教程精简版之一(系列片) 现在连教程都有精简版 准备 1.要学会 Flask 之前必须掌握 Python 基本使用. 2.会使用简单的 HTML 效果更加 3.若想练气功必须先自暴自弃 简 ...

  6. 孤荷凌寒自学python第三十一天python的datetime.timedelta模块

     孤荷凌寒自学python第三十一天python的datetime.timedelta模块 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) datetime.timedelta模块是一个表示 ...

  7. Android可移动的Button

    关键 package com.example.administrator.mystudent.ButtonMove; import android.app.Activity; import andro ...

  8. 201621123034 《Java程序设计》第14周学习总结

    作业14-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截 ...

  9. 【bzoj4974】字符串大师 逆模拟KMP

    题目描述 一个串T是S的循环节,当且仅当存在正整数k,使得S是$T^k$(即T重复k次)的前缀,比如abcd是abcdabcdab的循环节.给定一个长度为n的仅由小写字符构成的字符串S,请对于每个k( ...

  10. DataBase -- Note I

    SQL对大小写不敏感! SQL DML和DDL:可以把SQL分为两个部分:数据操作语言(DML)和数据定义语言(DDL) SQL(结构化查询语言)是用于执行查询的语法.但是SQL语言也包含用于更新.插 ...