• 技术文章 >Web开发 >JavaScript

    jQuery中next与nextAll区别详解

    宋雪维宋雪维2021-02-01 11:08:57原创2015

    在jQuery水平遍历dom方法中,next()方法和nextAll()方法使用很相似,但是也有区别。next()方法获取被选中元素的下一个且同级元素节点,返回同辈标签中的下一个标签(是一个值),而获取被选中元素的下边所有同级元素节点,返回的是同辈间下面的所有的标签(是多个值)。

    1、定义不同

    next()方法取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合;

    nextAll()方法查找当前元素之后所有的同辈元素。

    2、获取元素节点数量不同

    next()方法只是同辈的下一级,获取被选中元素的下一个且同级元素节点;

    nextAll()方法是同辈的下面的所有的,获取被选中元素的下边所有同级元素节点。

    3、返回值不同

    next()方法返回同辈标签中的下一个标签(是一个值);

    nextAll()方法返回的是同辈间下面的所有的标签(是多个值)。

    4、代码区分

    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

    27

    28

    29

    30

    <!DOCTYPE html>

    <html>

        <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/jquery-3.3.1.js"></script>

        </head>

        <body>

        <table>

            <tr id="thead">

            <th>编号</th>

            </tr>

            <tr>

                <td>1</td>

            </tr>

            <tr>

            <td>2</td>

            </tr>

        </table>

        <script>

            $("#thead").next().each(function(){

            console.log(this);

            });

            console.log("————分割线————")

            $("#thead").nextAll().each(function(){

            console.log(this);

            });

        </script>

        </body>

    </html>

    以上就是jQuery中next与nextAll区别详解,小编还想补充的是next()方法除了上述作用,还可以用于添加条件哟~更多JavaScript学习推荐:JavaScript教程

    专题推荐:js jquery
    上一篇:jQuery遍历prev()方法使用介绍 下一篇:jQuery中prevAll()方法如何遍历获取元素?

    相关文章推荐

    • python复制文件的方法整理• python如何使用sys.exit()退出程序• python中使用os.path.split()切片• os.system在python中如何调用命令• python中os.remove()的使用注意• python os.listdir()解决乱码

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网