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

前端技术 2023/09/10 JavaScript

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

本文地址：https://www.stayed.cn/item/26390

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案