AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jquery each index

2016-05-12 1516
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
获取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  
文章标签：
JavaScript
Java
索引
关键词：
jQuery each
jQuery index
航空母舰
目录
相关文章
卡尔特斯
|
JavaScript 前端开发
jQuery each() 便利
jQuery each() 便利
卡尔特斯
38 0
爱吃糖的范同学
|
7月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
爱吃糖的范同学
251 4
嚣张农民
|
JavaScript 前端开发
Jquery的$.each()如何使用
Jquery的$.each()如何使用
嚣张农民
82 0
流烟默
|
JSON JavaScript 前端开发
JQuery数组遍历 - $.each()，$().each()和forEach()
JQuery数组遍历 - $.each()，$().each()和forEach()
流烟默
179 0
在下周周ovo
|
存储 JavaScript 前端开发
【前端每日一问002】jquery中each与data方法的用法与概念
【前端每日一问002】jquery中each与data方法的用法与概念
在下周周ovo
110 0
卡卡西最近怎么样
|
JavaScript 前端开发 索引
jQuery 的 each 遍历
jQuery 的 each 遍历
卡卡西最近怎么样
291 0
jQuery 的 each 遍历
流楚丶格念
|
JavaScript
jQuery链式编程，each方法，多库共存
jQuery链式编程，each方法，多库共存
流楚丶格念
113 0
jQuery链式编程，each方法，多库共存
张起灵-小哥
|
JavaScript Java API
Java Web——jQuery中的第二组函数（remove、empty、append、html、each）与on()绑定事件
Java Web——jQuery中的第二组函数（remove、empty、append、html、each）与on()绑定事件
张起灵-小哥
160 0
Java Web——jQuery中的第二组函数（remove、empty、append、html、each）与on()绑定事件
冴羽
|
JavaScript 前端开发 索引
JavaScript专题之jQuery通用遍历方法each的实现
JavaScript 专题系列第十一篇，讲解 jQuery 通用遍历方法 each 的实现
冴羽
184 0
JavaScript专题之jQuery通用遍历方法each的实现
江咏之
|
JavaScript
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
江咏之
214 0
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法