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

所属分类: 网络编程 / JavaScript 阅读数: 1354
收藏 0 赞 0 分享

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

复制代码 代码如下:

 $(function(){
         $(".bao").hide();
          $(".bao").eq(0).show();
          $(".head li").click(function(){
              $(this).addClass('cur').siblings().removeClass("cur");
              $(".bao").eq($(this).index()).show().siblings(".bao").hide()
              var a=$(".bao").eq($(this).index()).find('li')
              if(a.length<0){
                   alert("我小于0啊!!")
              }
          });
          function moren(){
              var moren=$(".moren").find('li')
              if(moren.length==0){
                  alert("我是空的~没戏")
              }
          }
 })

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

复制代码 代码如下:

 $(function(){
          $(".bao").hide();
          $(".bao").eq(0).show();
          $(".head li").click(function(){
              $(this).addClass('cur').siblings().removeClass("cur");
              $(".bao").eq($(this).index()).show().siblings(".bao").hide()
          });
         var aaa= $(".bao ul")
         aaa.each(function(){
             var b=$(this).children('li').length
             alert(b)
             if(b==0){
                 $(this).append("<div>我是0个之后增加上去的</div>")
             }
         })
 })

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多