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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
第一篇初识bootstrap
Jun 21 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
vue v-model动态生成详解
Jun 30 Javascript
搭建vue开发环境
Jul 19 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脚本的10个技巧(1)
2006/10/09 PHP
laravel学习教程之关联模型
2016/07/30 PHP
php实现微信发红包功能
2018/07/13 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
python中import学习备忘笔记
2017/01/24 Python
微信跳一跳python代码实现
2018/01/05 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python二元表达式用法
2019/12/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
使用Python实现音频双通道分离
2020/12/25 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
春节活动策划方案
2014/01/24 职场文书
运动会致辞稿50字
2014/02/04 职场文书
出纳员的岗位职责
2014/02/22 职场文书
说明书怎么写
2014/05/06 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis