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

工作當中響應某個需求，切換選項卡的一個效果，根據每個選項下的內容元素的總數不同而進行不同的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                    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("

我是0個之後增加上去的

")
             }
         })
 })

這個方法用了$.each()
 
比較方便吧，目前來說得到我想要的結果。 $.each()遍歷出每個內容元素，然後在取得內容自己下面的li元素的總數 就可以判斷後得到我想要的效果