jQuery之遍历索引相关方法(each、index)

最新推荐文章于 2023-11-16 22:16:57 发布

&XYZ&

最新推荐文章于 2023-11-16 22:16:57 发布

阅读量3.5k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105378727

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

- each
- index

each

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    给ul里面的li依次添加序号（1、2、3...）
    */
    // $('li')
    //     .text(function () { })
    //     .addClass(function () { })

    $('li').each(function (index, ele) {
        $(ele).text(index + 1).addClass('demo' + index)
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
</head>

<body>
    <p>
        <i></i>
        <span></span>
        <i></i>
        <span></span>
    </p>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //将each和children配合一起使用
    $('p').children().each(function (index, ele) {
        if (ele.nodeName == "I") {
            $(ele).text(`i-${index}`)
        } else {
            $(ele).text(`span-${index}`)
        }
    })
</script>

</html>

index

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //点击ul里面的li，获取li的下标值
    $('ul').on('click', 'li', function (e) {
        console.log($(e.target).index())
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
</head>

<body>
    <p>
        <i>1</i>
        <span>2</span>
        <i>3</i>
        <span>4</span>
    </p>

</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //给index加参数,点击任意的span标签，得到该标签在兄弟元素span中的下标值
    $('p').children().on('click', function (e) {
        console.log($('p span').index($(e.target)))
    })
</script>

</html>

&XYZ&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery之遍历索引相关方法(each、index)

文章目录eacheach<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫