当前位置:主页 > jquery教程 > jQuery 中$(this).index与$.each的使用指南

jQuery中$(this).index与$.each的用法详解

发布:2020-01-30 20:47:27 157


给大家整理一篇jQuery相关的编程文章,网友宫锐精根据主题投稿了本篇教程内容,涉及到jQuery、$(this)、$.each、jQuery 中$(this).index与$.each的使用指南相关内容,已被543网友关注,相关难点技巧可以阅读下方的电子资料。

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

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


参考资料

相关文章

  • jquery层次选择器的知识点总结

    发布:2019-11-14

    今天小编就为大家分享一篇关于jquery层次选择器的介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧


  • jquery获取点击控件的绝对位置的具体做法

    发布:2021-06-01

    下面小编就为大家带来一篇jquery获取点击控件的绝对位置简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解jQuery .attr()和.removeAttr()方法操作元素属性

    发布:2020-01-27

    本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性,不会的朋友可以参考下哈,希望对大家有所帮助


  • jQuery UI库中dialog对话框功能使用全解析

    发布:2022-06-23

    给网友朋友们带来一篇关于jQuery的教程,这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下


  • 总结JQuery中extend的使用方法

    发布:2020-03-22

    这篇文章主要介绍了JQuery中extend的用法,实例分析了extend的功能、定义及相关使用技巧,需要的朋友可以参考下


  • jquery load事件(callback/data)使用方法及注意事项

    发布:2022-11-24

    给网友朋友们带来一篇关于jquery的教程,jquery load 事件使用方法,在网上有很多的相关介绍文章,不过大同小异,本文老生长谈,也介绍一下load事件使用方法,感兴趣的朋友可以了解下,或许对你学习jquery有所帮助


  • jquery实现可返回拖动轨迹的拖拽实例代码

    发布:2020-01-17

    基于jquery完美拖拽,可返回拖动轨迹 用JQ实现,话不多说,直接上码


  • jQuery如何实现倒计时功能

    发布:2020-02-22

    本文通过html代码和js代码给大家介绍了实现倒计时天,时,分,秒功能,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧


网友讨论