用jq遍历列表，获取列表的长度_jq 命令获取列表长度-优快云博客

本文链接：https://blog.youkuaiyun.com/dyx19971026/article/details/100353898

这篇博客介绍了如何使用jQuery（jq）遍历HTML列表，特别是通过.each()方法获取li元素的索引，并利用这些索引控制列表内元素的显示和隐藏，实现鼠标悬停时的内容变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单和大家分享一下，学习jq的一些笔记，我们想实现的一些功能是，鼠标放在每一个li 上，都会呈现出不同的内容和块区域，用jq语句可以很容易又很简洁就可以实现，我们可以用.each() 方法去遍历，获取元素为li的，然后声明变量去获取存储下标。之后在操作里边的元素，用获取到的下标来控制li里边我们想控制显隐的元素。

 <li class="dian1" i>
                        <a href="">家用电器</a>
                        <div class="youxian " id="you"></div>
                    </li>
                    <li class="dian1">
                        <a href="">手机/运营商/数码</a>
                        <div class="youxian" id="you1"></div>
                    </li>
                    <li class="dian1">
                        <a href="">电脑/办公</a>
                        <div class="youxian" id="you2"></div>
                    </li>
                    <li class="dian1">
                        <a href="">家居/家具/家装/厨具</a>
                        <div class="youxian" id="you3"></div>
                    </li>
                    <li class="dian1">
                        <a href="">男装/女装/童装/内衣</a>
                        <div class="youxian"></div>
                    </li>


 $('.dian1').each(function () {
        //获取下标
        var b = $('.dian1').index($(this));
        $(this).mouseover(function () {
            $('.youxian').eq(b).show();
        });
        $(this).mouseout(function () {
            $('.youxian').eq(b).hide();
        });
    });