请求大佬支援!!!jQuery:为什么我的index()索引得到的结果都是偶数?

我的index1和index2得到的都是偶数
图片说明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝服装精品</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
        *{/*清除原有页面所有边距*/
            margin:0;
            padding:0;
        }

        div{/*定义left盒子*/
            width: 500px;
            height: 500px;
            margin: 150px auto;
            border: 1px solid red;
        }

        #ulleft{
            width: 50px;
            border-right: 1px solid red;/*添加左垂直分隔线*/
        }

        #ulleft,#ulcenter{
            float: left;
        }

        #ulright{
            float: right;
            width: 50px;
            border-left:1px solid red;/*添加右垂直分隔线*/
        }   

        ul{
            list-style: none;/*去除小圆点*/
        }   

        a{/*a标签处理*/
            width: 50px;
            height: 98px;
            line-height: 100px;/*设置行高*/
            text-align: center;
            display: block;/*设置为块级元素*/
            text-decoration: none;/*去除下划线*/
        }

        img{
            width: 400px;
            height: 500px;  
/*          display: none;隐藏图片*/
        }
    </style>
</head>

<body>
    <div>
        <ul id="ulleft">
            <li><a href="#">0</a></li><hr>
            <li><a href="#">1</a></li><hr>
            <li><a href="#">2</a></li><hr>
            <li><a href="#">3</a></li><hr>
            <li><a href="#">4</a></li>
        </ul>

        <ul id="ulcenter">
            <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/2.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/5.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/鬼灭之刃/2.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/10.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/9.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/8.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/7.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/6.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/5.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/3.png" alt=""></a></li>
        </ul>

        <ul id="ulright">
            <li><a href="#">5</a></li><hr>
            <li><a href="#">6</a></li><hr>
            <li><a href="#">7</a></li><hr>
            <li><a href="#">8</a></li><hr>
            <li><a href="#">9</a></li>
        </ul>
    </div>
</body>
    <script>
//      需求1:给左边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏
//      需求1:给右边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏
        $(function(){
//          需求1:
            $('#ulleft').find('li').mouseenter(function(){
                var index1 = $(this).index();//获取当前鼠标移入的li标签索引(即为第几个li标签)
                console.log(index1);
//              让中间索引对应的li显示,其他的li隐藏

                $('#ulcenter li').eq(index1).show().siblings('li').hide();
            });

            $('#ulright').find('li').mouseenter(function(){
                var index2 = $(this).index();
                console.log(index2);
                $('#ulcenter li').eq(index2).show().siblings('li').hide();
            });
        });

    </script>
</html>

4个回答

这得从index的定义说起,当方法index()不传入参数时,其得出的结果是这个元素在同辈中的索引位置。例如:

图片说明

这时用index()取第一个li的时候,索引值就是1。为什么?因为他有同辈元素div占据了索引值0.例如你上面hr占据了索引。要么你将索引进行:正确索引=错误索引/2,要么想办法去掉"hr”元素,采用li的底下边缘作为分割线等等

qq_42200633
少丶客 明白了,非常感谢你的回答
9 个月之前 回复

可以避免使用index,直接hide所有li,然后通过this显示当前li

qq_33427422
子系天下 回复少丶客: 首先,可以把鼠标没有移入的样式状态当做默认状态,当鼠标移入其中一个元素时,将所有元素全部恢复到默认状态,然后根据$(this)拿到当前元素,进行对应的样式设置
9 个月之前 回复
qq_42200633
少丶客 抱歉,我还是新手,不是很懂
9 个月之前 回复

var index1 = $(this).index();打印下次数this是什么

qq_42200633
少丶客 对应0 1 2 3 4的话是0 2 4 6 8
9 个月之前 回复
$(this).index()这样是获取this在它的父元素内所有子元素中的索引位置,但this的父元素有<hr>,父元素中1,3,5,7的位置是<hr>元素啊。
 可以改成 $(this).index("li")这样是获取父元素内所有li元素集合中的索引位置

qq_42200633
少丶客 好的,谢谢你的帮助
9 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问