jquery each index siblings

最新推荐文章于 2025-09-16 16:11:01 发布

原创最新推荐文章于 2025-09-16 16:11:01 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

JS 组件专栏收录该内容

21 篇文章

订阅专栏

本文介绍使用jQuery实现的菜单切换效果及元素索引判断方法，包括如何通过点击切换子菜单的显示与隐藏，以及如何利用each方法遍历元素并根据鼠标悬停显示不同大小的图片。

判断当前元素是第几个元素

var index = $("ul li").index(this);

<div class="side-menu">
    <h3 class="item">管理中心</h3>
    <div class="menus">
        <p class="title title-close"><span class="grep">订单中心</span><i class="radius"></i></p>
        <ul style="display:none;">
            <li><a href="###">我的订单</a></li>
            <li><a href="###">我的关注</a></li>
            <li><a href="###">浏览记录</a></li>
            <li><a href="###">为我推荐</a></li>
        </ul>
        <p class="title title-close"><span class="grep">客户服务</span><i class="radius"></i></p>
        <ul style="display:none;">
            <li><a href="###">返修/退货</a></li>
            <li><a href="###">取消订单记录</a></li>
            <li><a href="###">我的投诉</a></li>
        </ul>
        <p class="title"><span class="grep">账户中心</span><i class="radius"></i></p>
        <ul>
            <li><a href="###" class="cur">账户信息</a></li>
            <li><a href="###">账户安全</a></li>
            <li><a href="###">账户余额</a></li>
            <li><a href="###">消费记录</a></li>
            <li><a href="###">我的积分</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(".menus > p").click(function(){
        var index = $('p').index($(this));
        $(this).siblings('p').removeClass("title").addClass("title title-close");
        //$(this).addClass('checked').siblings().removeClass('checked');
        $(this).parent().find('ul').eq(index).siblings('ul').hide();
        $(this).removeClass("title title-close").addClass("title");
        $(this).parent().find('ul').eq(index).show();
    });
</script>

JQ的each方法callback回调函数拥有两个默认（可省略）参数：第一个为对象的属性或数组的索引，第二个为对应属性的值或索引的内容

当激活的html样式（高亮）与其他html样式差别太大时，用div来实现(big small)

<ul id="hottop5" class="middle2">
    <li class="middle1">
        <div style="display: none;" class="small">
            <p class="miaoshu"><strong>1/</strong>
                <a href="http://www.test.com/-4000.html">
                    游戏</a>
            </p>
        </div>
        <div class="big" style="display: block;">
            <div class="no1_a">
                <p class="no1 alignleft">1<span>/</span></p>

                <p class="no1_img">
                    <a href="http://www.test.com/-4000.html">
                        <img src="http://media.test.com/catalog/product/cache/3/small_image/55x55/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
                    </a>
                </p>
            </div>
            <div class="no1_w clear">
                <a href="http://www.test.com/-4000.html">
                    游戏
                </a></div>
        </div>
    </li>

    <li class="middle1">
        <div class="small" style="display: block;">
            <p class="miaoshu"><strong>2/</strong>
                <a href="http://www.test.com/catalog/product/view/id/4001/">
                    颜色尺码</a>
            </p>
        </div>
        <div style="display: none;" class="big">
            <div class="no1_a">
                <p class="no1 alignleft">2<span>/</span></p>

                <p class="no1_img">
                    <a href="http://www.test.com/catalog/product/view/id/4001/">
                        <img src="http://media.test.com/catalog/product/cache/3/small_image/55x55/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
                    </a>
                </p>
            </div>
            <div class="no1_w clear">
                <a href="http://www.test.com/catalog/product/view/id/4001/">
                    颜色尺码
                </a></div>
        </div>
    </li>

    <li class="middle1">
        <div class="small" style="display: block;">
            <p class="miaoshu"><strong>3/</strong>
                <a href="http://www.test.com/-3999.html">
                    电银票优惠券</a>
            </p>

            <p class="dian">100.00 兑兑点</p>
        </div>

        <div style="display: none;" class="big">
            <div class="no1_a">
                <p class="no1 alignleft">3<span>/</span></p>

                <p class="no1_img">
                    <a href="http://www.test.com/-3999.html">
                        <img src="http://media.test.com/catalog/product/cache/3/small_image/55x55/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
                    </a>
                </p>
            </div>
            <div class="no1_w clear">
                <a href="http://www.test.com/-3999.html">
                    电银票优惠券
                </a></div>
        </div>
    </li>
</ul>
<script type="text/javascript">
    $("#hottop5 > li").each(function (i) {
        $(this).mouseover(function () { 
            $(this).siblings().find(".small").show();// 其他显示小图
            $(this).find(".small").hide();
            $(this).siblings().find(".big").hide();
            $(this).find(".big").show(); //显示当前大图
        })
    })
</script>

你上面的例子，属于数组（对象数组）形式，如果加参数，第一个参数就是数组的索引值（0,1,2,....），第二个参数为索引下的对象（DOM）

var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
    alert(this);
});
输出：one   two  three  four   five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
    alert(item[0]);
});
输出：1   4   7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
    alert(obj[key]);      
});
输出：1   2  3  4  5