zoukankan      html  css  js  c++  java
  • 遍历DOM树,each()遍历

    在《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对象。

  • 相关阅读:
    Android
    nodejs 中 接受前端的数据请求的处理
    nodejs 文件操作
    nodejs 简单的搭建一个服务器
    angular 的跨域处理
    angular 的配置文件的应用
    angular 语法的应用
    淘宝的公共样式
    web编辑器的快捷键
    scss 用法 及 es6 用法讲解
  • 原文地址:https://www.cnblogs.com/TangGe520/p/9131892.html
Copyright © 2011-2022 走看看