06-jquery 获取元素的索引值 选项卡示例

有时候需要获得匹配元素相对应其同胞（同辈）元素的索引位置，此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); 弹出1
...
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

获取索引值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取索引值</title>
    <script src="js/jquery.js"></script>   
    <script>
        $(function(){
            var $li = $('.list li');
            // alert($li.length) //弹出8

            // alert($li.eq(3).index()) //弹出3

            //弹出class=myli的li的索引值
            alert($li.filter(".myli").index())
        })

    </script>
</head>
<body>
    <!-- ul.list>li{$}*8 -->
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="myli">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

选项卡示例：

在这个示例中，有个关键字this，表示当前点击的对象，注意，this是原生js写法，jquery的写法是$(this)。比如原生this没有css方法，jquery有：$(this).css(...)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡示例</title>
    <script src="js/jquery.js"></script>
    <style>
        .btns input{
            width:100px;
            height:40px;
            background-color:#ddd;
        }

        .btns .current{
            background-color:gold;
        }

        .cons div{
            width:500px;
            height:300px;
            background-color:gold;
            display:none;
            text-align:center;
            line-height:300px;
            font-size:30px;
        }

        .cons .active{
            display:block;
        }

    </style>
    <script>
        $(function(){
            //1、选择三个按钮
            var $btn = $(".btns input");
            //2、选择三个选项卡的div
            var $div = $(".cons div")
            //3、给三个按钮绑定click事件
            $btn.click(function(){
                //4、$(this)表示当前点击的对象，把current类给这个对象.用siblings选择其它选项卡并去掉current类
                $(this).addClass('current').siblings().removeClass("current")

                //上面的代码实现了三个按钮点击哪个哪个就变亮，其它变灰的效果，下面需要将三个选项卡关联起来

                //定义num接受当前标签的索引值
                var num = ($(this).index())

                //当前点击的按钮对应索引值的选项卡div，添加样式active，同时去掉另外选项卡的样式active
                $div.eq(num).addClass('active').siblings().removeClass("active")

            })

        })

    </script>
</head>
<body>
    <div class="btns">
        <input type="button" value="01" class="current">
        <input type="button" value="02" >
        <input type="button" value="03">
    </div>
    <div class="cons">
        <div class="active">选项卡1的内容</div>
        <div>选项卡2的内容</div>
        <div>选项卡3的内容</div>
    </div>
</body>
</html>

 

posted @ 2019-03-22 23:37  greenfan  阅读(397)  评论(0)    收藏  举报