快捷導(dǎo)航

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

更新時(shí)間：2014年11月20日 10:48:46 投稿：hebedich

這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧

工作當(dāng)中響應(yīng)某個(gè)需求，切換選項(xiàng)卡的一個(gè)效果，根據(jù)每個(gè)選項(xiàng)下的內(nèi)容元素的總數(shù)不同而進(jìn)行不同的html變化（如果選項(xiàng)卡下的內(nèi)容為空就等于XXX，否則就XXX）

復(fù)制代碼代碼如下:

 $(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("我是空的~沒戲")

              }

          }

 })

先聲明選項(xiàng)卡的頭部就叫頭部

　　　選項(xiàng)卡的內(nèi)容就叫內(nèi)容啊~

想到的第一種方法(笨方法)：

綁定添加了click事件。當(dāng)切換頭部的時(shí)候執(zhí)行.頭部根據(jù)自己的索引獲得相對(duì)應(yīng)的內(nèi)容，在遍歷到內(nèi)容下的li元素，就獲得每個(gè)頭部相對(duì)應(yīng)的內(nèi)容下的總個(gè)數(shù)。

因?yàn)檎f，這是click事情后發(fā)現(xiàn)的事，但是忽略了頭部的第一個(gè)元素，我要它在瀏覽器的刷新的時(shí)候就開始執(zhí)行，所以我為頭部的第一個(gè)元素增加多了一個(gè)class類在對(duì)這個(gè)class類進(jìn)行判斷。最后~

就得到我想要的效果。當(dāng)個(gè)數(shù)==0||!==0的時(shí)候就執(zhí)行我所要的。

但是考慮到。后面可能會(huì)出現(xiàn)一切我所預(yù)料不到的事，我不要它在我點(diǎn)擊的時(shí)候在執(zhí)行，我要在瀏覽器刷新后加載后就幫我執(zhí)行。所以小菜鳥我又苦逼的湊出一種方法

另外的一種方法感覺這樣比較好~:

復(fù)制代碼代碼如下:

 $(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個(gè)之后增加上去的</div>")

             }

         })

 })