jQuery中eq(n)与nth-child(n)的区别

cloud_yf

于 2018-06-28 11:35:06 发布

阅读量594

点赞数

分类专栏：前端学习文章标签：前端 js jQuery

本文链接：https://blog.csdn.net/u010629610/article/details/80840706

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

使用和学习前端的时候想使用过滤器查找想要的DOM元素，结果发现使用:nth-child(n)的时候踩了坑，主要就是混淆了:eq(n)和:nth-child(n)

两者区别

:nth-child(n)是在匹配元素的父元素中选择第n个元素，n自1开始，然后判断是否符合选择器条件，而 :eq(n)是在匹配的元素中取下标为n的元素，n自0开始。

举例说明

test.html

<!DOCTYPE>
<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="container">
        <div class="group1">
            <div id="item10" class="">
                item10
            </div>
            <div id="item11" class="item">
                item11
            </div>
            <div id="item12" class="item">
                item12
            </div>
            <div id="item13" class="item">
                item13
            </div>
        </div>
        <div class="group2">
            <div id="item21" class="item">
                item21
            </div>
            <div id="item22" class="item">
                item22
            </div>
            <div id="item23" class="item">
                item23
            </div>
        </div>
    </div>

    <script src="jquery.js" type="text/javascript"></script>
    <script src="test.js" type="text/javascript"></script>
</body>

test.js

$(function(){
    console.log("test1,nth-child:");
    /**
     * :nth-child(n)是在匹配元素的父元素中选择第n个元素，n自1开始，然后判断是否符合选择器条件
     * 以v1为例，选择器"#container .item:nth-child(1)"会先查到".group1.item"和".group2.item",
     * 也就是两个分组中所有".class"元素。然后根据该子元素是否是其父元素的第一个子元素来执行过滤。
     * :eq(n)是在匹配的元素中取下标为n的元素，n自0开始。
     */
    //毫无疑问，该查询会返回一个jquery对象，其内部有6个元素,索引从0到5
    var v0=$("#container .item");
    console.log(v0);
    console.log(v0[5]);
    //:eq(n)过滤器，$("#container .item")[5]等价于$("#container .item:eq(5)")
    var a1=$("#container .item:eq(5)");
    console.log(a1);
    //相当于在v0的基础上执行过滤:是其父元素的第一个子元素
    var v1=$("#container .item:nth-child(1)");
    //在"#item10"存在的时候，该查询会得到一个节点，即"#item21",因为只有它满足过滤条件
    console.log(v1);
    //如果我们干掉"#item10"元素，那么$("#container .item:nth-child(1)")即可以得到两个节点"#item11","#item21",因为他们满足过滤器条件了
    console.log("let's detach '#item10' element");
    $("#item10").detach();
    var v2=$("#container .item:nth-child(1)");
    console.log(v2);
})

ps:感谢师弟的指导（字有点小，哈哈）

cloud_yf

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中eq(n)与nth-child(n)的区别

前言使用和学习前端的时候想使用过滤器查找想要的DOM元素，结果发现使用:nth-child(n)的时候踩了坑，主要就是混淆了:eq(n)和:nth-child(n)两者区别:nth-child(n)是在匹配元素的父元素中选择第n个元素，n自1开始，然后判断是否符合选择器条件，而 :eq(n)是在匹配的元素中取下标为n的元素，n自0开始。举例说明test.html&lt;!DOCTYPE&gt;&...
复制链接

扫一扫