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


Posted in Javascript onNovember 20, 2014

工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的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元素的总数 就可以判断后得到我想要的效果

Javascript 相关文章推荐
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery提示效果代码分享
Nov 20 #Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 #Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 #Javascript
js中数组排序sort方法的原理分析
Nov 20 #Javascript
javascript继承机制实例详解
Nov 20 #Javascript
jQuery验证插件 Validate详解
Nov 20 #Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 #Javascript
You might like
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python中__name__的使用实例
2015/04/14 Python
处理Python中的URLError异常的方法
2015/04/30 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python守护进程实现过程详解
2020/02/10 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
python的pip有什么用
2020/06/17 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
学生发电厂实习自我鉴定
2013/09/22 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
通知怎么写?
2019/04/17 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Python实现日志实时监测的示例详解
2022/04/06 Python