jquery each index

获取index

Java代码  

1. <div class="side-menu">  
2.     <h3 class="item">管理中心</h3>  
3.     <div class="menus">  
4.         <p class="title title-close"><span class="grep">订单中心</span><i class="radius"></i></p>  
5.         <ul style="display:none;">  
6.             <li><a href="###">我的订单</a></li>  
7.             <li><a href="###">我的关注</a></li>  
8.             <li><a href="###">浏览记录</a></li>  
9.             <li><a href="###">为我推荐</a></li>  
10.         </ul>  
11.         <p class="title title-close"><span class="grep">客户服务</span><i class="radius"></i></p>  
12.         <ul style="display:none;">  
13.             <li><a href="###">返修/退货</a></li>  
14.             <li><a href="###">取消订单记录</a></li>  
15.             <li><a href="###">我的投诉</a></li>  
16.         </ul>  
17.         <p class="title"><span class="grep">账户中心</span><i class="radius"></i></p>  
18.         <ul>  
19.             <li><a href="###" class="cur">账户信息</a></li>  
20.             <li><a href="###">账户安全</a></li>  
21.             <li><a href="###">账户余额</a></li>  
22.             <li><a href="###">消费记录</a></li>  
23.             <li><a href="###">我的积分</a></li>  
24.         </ul>  
25.     </div>  
26. </div>  
27. <script type="text/javascript">  
28.     $(".menus > p").click(function(){  
29.         var index = $('p').index($(this));  
30.         $(this).siblings('p').removeClass("title").addClass("title title-close");  
31.         $(this).parent().find('ul').eq(index).siblings('ul').hide();  
32.         $(this).removeClass("title title-close").addClass("title");  
33.         $(this).parent().find('ul').eq(index).show();  
34.     });  
35. </script>  

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

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

 

Java代码  

1. <ul id="hottop5" class="middle2">  
2.     <li class="middle1">  
3.         <div style="display: none;" class="small">  
4.             <p class="miaoshu"><strong>1/</strong>  
5.                 <a href="http://www.test.com/-4000.html">  
6.                     游戏</a>  
7.             </p>  
8.         </div>  
9.         <div class="big" style="display: block;">  
10.             <div class="no1_a">  
11.                 <p class="no1 alignleft">1<span>/</span></p>  
12.   
13.                 <p class="no1_img">  
14.                     <a href="http://www.test.com/-4000.html">  
15.                         <img src="http://media.test.com/catalog/product/cache/3/small_image/55x55/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">  
16.                     </a>  
17.                 </p>  
18.             </div>  
19.             <div class="no1_w clear">  
20.                 <a href="http://www.test.com/-4000.html">  
21.                     游戏  
22.                 </a></div>  
23.         </div>  
24.     </li>  
25.   
26.     <li class="middle1">  
27.         <div class="small" style="display: block;">  
28.             <p class="miaoshu"><strong>2/</strong>  
29.                 <a href="http://www.test.com/catalog/product/view/id/4001/">  
30.                     颜色尺码</a>  
31.             </p>  
32.         </div>  
33.         <div style="display: none;" class="big">  
34.             <div class="no1_a">  
35.                 <p class="no1 alignleft">2<span>/</span></p>  
36.   
37.                 <p class="no1_img">  
38.                     <a href="http://www.test.com/catalog/product/view/id/4001/">  
39.                         <img src="http://media.test.com/catalog/product/cache/3/small_image/55x55/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">  
40.                     </a>  
41.                 </p>  
42.             </div>  
43.             <div class="no1_w clear">  
44.                 <a href="http://www.test.com/catalog/product/view/id/4001/">  
45.                     颜色尺码  
46.                 </a></div>  
47.         </div>  
48.     </li>  
49.   
50.     <li class="middle1">  
51.         <div class="small" style="display: block;">  
52.             <p class="miaoshu"><strong>3/</strong>  
53.                 <a href="http://www.test.com/-3999.html">  
54.                     电银票优惠券</a>  
55.             </p>  
56.   
57.             <p class="dian">100.00 兑兑点</p>  
58.         </div>  
59.   
60.         <div style="display: none;" class="big">  
61.             <div class="no1_a">  
62.                 <p class="no1 alignleft">3<span>/</span></p>  
63.   
64.                 <p class="no1_img">  
65.                     <a href="http://www.test.com/-3999.html">  
66.                         <img src="http://media.test.com/catalog/product/cache/3/small_image/55x55/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">  
67.                     </a>  
68.                 </p>  
69.             </div>  
70.             <div class="no1_w clear">  
71.                 <a href="http://www.test.com/-3999.html">  
72.                     电银票优惠券  
73.                 </a></div>  
74.         </div>  
75.     </li>  
76. </ul>  
77. <script type="text/javascript">  
78.     $("#hottop5 > li").each(function (i) {  
79.         $(this).mouseover(function () {   
80.             $(this).siblings().find(".small").show();// 其他显示小图  
81.             $(this).find(".small").hide();  
82.             $(this).siblings().find(".big").hide();  
83.             $(this).find(".big").show(); //显示当前大图  
84.         })  
85.     })  
86. </script>   

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

Java代码  

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