• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 中$(this).index与$.each的使用指南

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

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,$(this),$.each等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • JQuery UI DatePicker中z-index默认为1的解决办法
  • jQuery bind事件使用详解
  • 原生javascript实现的分页插件pagenav
  • jquery使用淘宝接口跨域查询手机号码归属地实例
  • jQuery 使用个人心得
  • jquery下jstree简单应用 - v1.0
  • jQuery中index()方法用法实例
  • jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
  • jQuery第三课 修改元素属性及内容的代码
  • jquery UI Datepicker时间控件的使用方法(加强版)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • XMLHttpRequest处理xml格式的返回数据(示例代码)
    • 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
    • jquery validate表单验证插件
    • 基于Bootstrap和jQuery构建前端分页工具实例代码
    • jQuery 数据缓存模块进化史详细介绍
    • PageSwitch插件实现100种不同图片切换效果
    • jQuery选择器源码解读(八):addCombinator函数
    • jquery遍历table的tr获取td的值实现方法
    • jquery+CSS实现的多级竖向展开树形TRee菜单效果
    • jquery ajax提交整个表单元素的快捷办法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有