#转载请留言联系

从一个简单的例子引入，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. Activiti入门 -- 轻松解读数据库

    相关文章: <史上最权威的Activiti框架学习指南> <Activiti入门 --环境搭建和核心API简介> 在Activiti中,相对前身JBPM基础上又额外多了5张,框 ...

  2. wget下载https文件，服务器可以虚拟机中不行的问题

    用wget下载一个图片资源(https协议),在服务器上可以,但在本机的虚拟机中卡在下面这里了: [root@localhost ~]# wget 'https://gp1.wac.edgecastc ...

  3. SSH集成cxf 发布restful webservice

    首先讲一下什么是restful webservice ,这个问题网上一搜有很多博文去长篇大论的介绍它,但是最后你看完了也会觉得云里雾里的,所以我在这里简单的讲一下我理解的rest webservice ...

  4. 遍历两个自定义列表来实现字典(key:value)

    #自定义key    ${keys}    create list    key1    key2    key3 #自定义value    ${values}    create list    v ...

  5. Java基础-1简单了解与原理

    简单了解: Java看起来设计得很像C++,但是为了使语言小和容易熟悉,设计者们把C++语言中许多可用的特征去掉了,这些特征是一般程序员很少使用的.因为Java没有结构,数组和串都是对象,所以不需要指 ...

  6. 孤荷凌寒自学python第三十八天初识python的线程控制

     孤荷凌寒自学python第三十八天初识python的线程控制 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 一.线程 在操作系统中存在着很多的可执行的应用程序,每个应用程序启动后,就可以看 ...

  7. Opencv3.4.5安装包

    这个资源是Opencv3.4.5安装包,包括Windows软件包,Android软件包,IOS软件包,还有opencv的源代码:需要的下载吧. 点击下载

  8. 聊聊、Java SPI

    SPI,Service Provider Interface,服务提供者接口. Animal 接口 package com.rockcode.www.spi; public interface Ani ...

  9. Python下安装protobuf

    1. 下载安装包 2. 解压缩 tar –xzvf protobuf-2.6.1.tar.gz 3. 安装protoc 在python中使用protocbuf需要Protocal Buffer 编译器 ...

  10. 通过设计表快速了解sql语句中字段的含义

    打开Navicat-------> 选择数据库 ------->右键设计表------>查看下方注释