jquery each index-阿里云开发者社区

jquery each index

2016-05-12 1493

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

获取index

    Java代码  
     
   
<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).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)

    Java代码  
     
   
<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）。

    Java代码  
     
   
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  

jquery each index

热门文章

最新文章

相关课程

相关电子书

相关实验场景