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 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
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与SQL语句常用大全
2016/12/10 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python re模块介绍
2014/11/30 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python绘制分布折线图的示例
2020/09/24 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
银行存款证明样本
2014/01/17 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
委托书范文
2014/04/02 职场文书
学校党员干部承诺书
2015/05/04 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
python 实现图片特效处理
2022/04/03 Python