在《jQuery教程/理解选取更新范围》一节中，我们知道：当选择器返回了多个元素时，可以使用一个方法来更新所有的元素，不再需要使用循环。

然后有的时候需要遍历元素，怎么办？

使用each()方法可以遍历。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>each()遍历</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>     
        <div>
            <ul id="ul">
                <li id="a">油条</li>
                <li id="b">包子</li>
                <li id="c">米饺</li>
                <li id="d"><a>鱼粉</a></li>
            </ul>
        </div>
        <script>
            $('li').each(function(){
                // 获取每个li元素的id
                var ids=this.id;
                 // li元素的id追加到li元素后面
                $(this).append('<em >'+ids+'</em>');
            });
        </script>
    </body>
</html>

在使用时，each()方法的参数通常是一个匿名函数。用于及时处理遍历的元素。

注意：

this关键字用于访问当前元素，它的意义是代表当前元素。

$(this)的意思是使用关键字this创建一个包含当前元素的jQuery对象。

遍历DOM树，each()遍历的更多相关文章

  1. 函数遍历DOM树

    //获取页面中的根节点--根标签   var root=document.documentElement;//html   //函数遍历DOM树   //根据根节点,调用fn的函数,显示的是根节点的名 ...

  2. 先序遍历DOM树的5种方法

    DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...

  3. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  4. 拷贝和遍历DOM树

    一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...

  5. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  6. 遍历DOM树

    遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...

  7. JavaScript 算法应用: 遍历DOM树的两种方式

    1 常见的DOM树结构: 2  DOM数遍历有两种方式: 3 广度优先代码: 4 深度优先遍历代码

  8. 遍历DOM树，理解更新范围

    在JavaScript中,如果需求对多个元素重复进行同样的操作,就需要写一个循环来遍历选中的所有元素. 在jQuery中,当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. ...

  9. 遍历DOM树，链式操作

    如果需要在同一个选取结果上使用多个jQuery方法,可以同时列出这些方法,并用.隔开,如下面的代码. 1 $("#one").hide().delay(500).fadeIn(15 ...

随机推荐

  1. 关于 MySQL LEFT JOIN 不可不知的事

    你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,这篇文章,我想让你能多学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... IS NULL 子句的复 ...

  2. 使用SecureCRT软件运维的配置习惯

    使用 SecureCRT 软件运维的配置习惯 作者:Eric 微信:loveoracle11g 选项--->全局选项 配置文件存放路径 默认CRT配置的配置文件在C盘 常规--->默认会话 ...

  3. MySQL--局域网、外网访问MySQL

    一.局域网.外网访问 1. 打开CMD,导航到当前MySQL的bin路径,如下图: 2. 访问MySQL:输入MySQL -u root -p,点击Enter键,即可看到密码输入框: 输入密码,点需E ...

  4. 熟悉SQL Server 数据类型

    SQL Server中包含了4种不同的数据类型,一 数字型,二 日期与时间, 三 字符串, 四 其他 上述4个大类中,每一类包含一定数量的子类. 表中的每一列,被声明的变量,参数等,都必须有与之相对应 ...

  5. c#linq去除重复项并将相同数据的数量字段值相加

    这是执行前和执行后想要的效果 以下是用Sql语句实现的代码: select goodsno, goodsspec,SUM([count]) as count from goods group by g ...

  6. solr使用cursorMark做深度分页

    深度分页 深度分页是指给搜索结果指定一个很大的起始位移. 普通分页在给定一个大的起始位移时效率十分低下,例如start=1000000,rows=10的查询,搜索引擎需要找到前1000010条记录然后 ...

  7. Phpstorm的强大功能

    你是否也是重复,重复,一直重复的打着重复的代码? 你是否也一直重复重复 的 Ctrl+c .Ctrl+v? 当你看到此项操作的时候就会发现,原来复制粘贴还能这么玩儿... 演示效果(以phpExcel ...

  8. SpringBoot应用部署到Tomcat中无法启动问题(初识)

    参考http://blog.csdn.net/asdfsfsdgdfgh/article/details/52127562 背景 最近公司在做一些内部的小型Web应用时, 为了提高开发效率决定使用Sp ...

  9. Django之Django debug toolbar调试工具

    一.安装Django debug toolbar调试工具 pip3 install django-debug-toolbar 如果出错命令为 pip install django_debug_tool ...

  10. 模拟select控件，css模拟下拉

    <!DOCTYPE html > <head>     <meta http-equiv="Content-Type" content="t ...