jquery遍历

y199710

于 2024-02-22 15:43:16 发布

阅读量357

点赞数 9

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/y199710/article/details/136235790

版权

本文详细介绍了jQuery中的四个常用方法：each()用于遍历后代p标签，eq()通过下标获取标签对象，first()和last()分别获取第一个和最后一个p元素。通过实例演示了如何在JavaScript中使用这些函数处理DOM元素。

摘要由CSDN通过智能技术生成

1、each()，类似forEach，即遍历所有已匹配的标签

2、eq()，通过下标查找jquery标签对象

3、first()，获得jquery标签对象内置数组中的第一个jquery标签对象

4、last()，获得jquery标签对象内置数组中的最后一个jquery标签对象

<body>
    <div id="box">
        <p>第1个p</p>
        <p>第2个p</p>
        <p>第3个p</p>
        <p>第4个p</p>
        <p>第5个p</p>
        <p>第6个p</p>

    </div>

</body>
<script>
    //获取id为box的后代p标签
    const ps = $('#box').find('p')
    console.log(ps, 'p');
    //遍历
    ps.each(function (index, elem) {
        console.log(index, elem); //index为下标 elem当前变遍历的标签
        if (index == 1) {
            const txt = $(elem).text() //$(elem)对原生dom节点转为jquery对象
            console.log(txt, 'txt'); //第2个p
        }
    })
    const th = ps.eq(3).text()  //下标为3的标签对象的值
    console.log(th,'th');  //第4个p

    const first=ps.first().text()  //获取第一个p的内容
    console.log(first,'first');  //第1个p
    const last=ps.last().text() //获取最后一个p的内容
    console.log(last,'last'); //第6个p

</script>