html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

jQuery 中$(this).index与$.each的使用指南_jquery_

[ ] 已经帮助:人解决问题

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

复制代码 代码如下:
fHPHTML5中文学习网 - HTML5先行者学习网
 $(function(){fHPHTML5中文学习网 - HTML5先行者学习网
         $(".bao").hide();fHPHTML5中文学习网 - HTML5先行者学习网
          $(".bao").eq(0).show();fHPHTML5中文学习网 - HTML5先行者学习网
          $(".head li").click(function(){fHPHTML5中文学习网 - HTML5先行者学习网
              $(this).addClass('cur').siblings().removeClass("cur");fHPHTML5中文学习网 - HTML5先行者学习网
              $(".bao").eq($(this).index()).show().siblings(".bao").hide()fHPHTML5中文学习网 - HTML5先行者学习网
              var a=$(".bao").eq($(this).index()).find('li')fHPHTML5中文学习网 - HTML5先行者学习网
              if(a.length<0){fHPHTML5中文学习网 - HTML5先行者学习网
                   alert("我小于0啊!!")fHPHTML5中文学习网 - HTML5先行者学习网
              }fHPHTML5中文学习网 - HTML5先行者学习网
          });fHPHTML5中文学习网 - HTML5先行者学习网
          function moren(){fHPHTML5中文学习网 - HTML5先行者学习网
              var moren=$(".moren").find('li')fHPHTML5中文学习网 - HTML5先行者学习网
              if(moren.length==0){fHPHTML5中文学习网 - HTML5先行者学习网
                  alert("我是空的~没戏")fHPHTML5中文学习网 - HTML5先行者学习网
              }fHPHTML5中文学习网 - HTML5先行者学习网
          }fHPHTML5中文学习网 - HTML5先行者学习网
 }) fHPHTML5中文学习网 - HTML5先行者学习网
fHPHTML5中文学习网 - HTML5先行者学习网

先声明 选项卡的头部就叫头部fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
   选项卡的内容就叫内容啊~fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
想到的第一种方法(笨方法):fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
绑定添加了click事件。当切换头部的时候执行.头部根据自己的索引获得相对应的内容,在遍历到内容下的li元素,就获得每个头部相对应的内容下的总个数。fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
因为说,这是click事情后发现的事,但是忽略了头部的第一个元素,我要它在浏览器的刷新的时候就开始执行,所以我为头部的第一个元素增加多了一个class类 在对这个class类进行判断。最后~fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
就得到我想要的效果。当个数==0||!==0的时候就执行我所要的。fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
但是考虑到。后面可能会出现一切我所预料不到的事,我不要它在我点击的时候在执行,我要在浏览器刷新后加载后就帮我执行。所以小菜鸟我又苦逼的凑出一种方法fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
另外的一种方法 感觉这样比较好~:fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
fHPHTML5中文学习网 - HTML5先行者学习网
 $(function(){fHPHTML5中文学习网 - HTML5先行者学习网
          $(".bao").hide();fHPHTML5中文学习网 - HTML5先行者学习网
          $(".bao").eq(0).show();fHPHTML5中文学习网 - HTML5先行者学习网
          $(".head li").click(function(){fHPHTML5中文学习网 - HTML5先行者学习网
              $(this).addClass('cur').siblings().removeClass("cur");fHPHTML5中文学习网 - HTML5先行者学习网
              $(".bao").eq($(this).index()).show().siblings(".bao").hide()fHPHTML5中文学习网 - HTML5先行者学习网
          });fHPHTML5中文学习网 - HTML5先行者学习网
         var aaa= $(".bao ul")fHPHTML5中文学习网 - HTML5先行者学习网
         aaa.each(function(){fHPHTML5中文学习网 - HTML5先行者学习网
             var b=$(this).children('li').lengthfHPHTML5中文学习网 - HTML5先行者学习网
             alert(b)fHPHTML5中文学习网 - HTML5先行者学习网
             if(b==0){fHPHTML5中文学习网 - HTML5先行者学习网
                 $(this).append("<div>我是0个之后增加上去的</div>")fHPHTML5中文学习网 - HTML5先行者学习网
             }fHPHTML5中文学习网 - HTML5先行者学习网
         })fHPHTML5中文学习网 - HTML5先行者学习网
 }) fHPHTML5中文学习网 - HTML5先行者学习网
fHPHTML5中文学习网 - HTML5先行者学习网

这种方法用了$.each()fHPHTML5中文学习网 - HTML5先行者学习网
 fHPHTML5中文学习网 - HTML5先行者学习网
比较方便吧,目前来说得到我想要的结果。$.each()遍历出每个内容元素,然后在获取内容自己下面的li元素的总数 就可以判断后得到我想要的效果fHPHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助