码迷,mamicode.com
首页 > 其他好文 > 详细

【JQ成长笔记】关于$(this).index与$.each的使用

时间:2014-09-29 00:09:56      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   使用   ar   strong   sp   

本人菜鸟入门,小庙容不下大神的 O(∩_∩)O~~轻喷~

工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX)

 1 $(function(){
 2         $(".bao").hide();
 3          $(".bao").eq(0).show();
 4          $(".head li").click(function(){
 5              $(this).addClass(‘cur‘).siblings().removeClass("cur");
 6              $(".bao").eq($(this).index()).show().siblings(".bao").hide()
 7              var a=$(".bao").eq($(this).index()).find(‘li‘)
 8              if(a.length<0){
 9                   alert("我小于0啊!!")
10              }
11          });
12         
13          function moren(){
14              var moren=$(".moren").find(‘li‘)
15              if(moren.length==0){
16                  alert("我是空的~没戏")
17              }
18          }
19 })

先声明 选项卡的头部就叫头部

   选项卡的内容就叫内容啊~

想到的第一种方法(笨方法):

绑定添加了click事件。当切换头部的时候执行.头部根据自己的索引获得相对应的内容,在遍历到内容下的li元素,就获得每个头部相对应的内容下的总个数。

因为说,这是click事情后发现的事,但是忽略了头部的第一个元素,我要它在浏览器的刷新的时候就开始执行,所以我为头部的第一个元素增加多了一个class类 在对这个class类进行判断。最后~

就得到我想要的效果。当个数==0||!==0的时候就执行我所要的。

但是考虑到。后面可能会出现一切我所预料不到的事,我不要它在我点击的时候在执行,我要在浏览器刷新后加载后就帮我执行。所以小菜鸟我又苦逼的凑出一种方法

 

另外的一种方法 感觉这样比较好~:

 1 $(function(){
 2          $(".bao").hide();
 3          $(".bao").eq(0).show();
 4          $(".head li").click(function(){
 5              $(this).addClass(‘cur‘).siblings().removeClass("cur");
 6              $(".bao").eq($(this).index()).show().siblings(".bao").hide()
 7          });
 8 
 9         var aaa= $(".bao ul")
10         aaa.each(function(){
11             var b=$(this).children(‘li‘).length
12             alert(b)
13             if(b==0){
14                 $(this).append("<div>我是0个之后增加上去的</div>")
15             }
16         })
17 })

这种方法用了$.each()

比较方便吧,目前来说得到我想要的结果。$.each()遍历出每个内容元素,然后在获取内容自己下面的li元素的总数 就可以判断后得到我想要的效果

。。恩啊~分享到这里~~我是菜鸟,轻拍~

 

【JQ成长笔记】关于$(this).index与$.each的使用

标签:style   blog   color   io   os   使用   ar   strong   sp   

原文地址:http://www.cnblogs.com/lee-iekiller/p/3999113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!