JQuery中使用.each()遍歷元素學習筆記_jquery

今天寫一個選項卡的時候，需要用到jquery中的.each(),透過取得each()中的index參數來取得li元素的編號，方便下面區塊顯示，在一個測試頁面上寫好了下面的程式碼：

複製程式碼 程式碼如下:

   
   
   
   
   


   

       

           

               
• 選項一

               
• 選項二

               
• 選項三

               
• 選項四

           

       

       

           

內容物一

           

內容二

           

內容三

           

內容四

   

測試的結果是正常，後來在一個實際使用的頁面中使用的時候，發現上面的li列表變動的時候，下面的div區塊不跟著變動不同的區塊，以為是css樣式和實際使用的頁面中其他的樣式衝突了，將css選擇器全部改成獨有的之後，發現還是這個問題，於是判斷應該是這裡：

複製程式碼 程式碼如下:

$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content>div:eq(" index ")").addClass("consh");

第一句，第二句取出樣式的時候，沒有問題，第三局給當前的li標籤加上titsh的css樣式也正常，就是最後一句給通過div：eq（index）獲取到的div區塊加樣式的時候失敗。

於是我在：

複製程式碼 程式碼如下:

$("li").each(function(index){
$(this).mouseover(function(){

這兩句之間加了一個alert（index）彈窗，看看效果，發現有10幾個li標籤的索引值被alert出來，一想原來實際這個頁面中還有其他的li標籤，所以導致each（）迭代出來的索引值和下面div區塊的索引值對應不上，這樣上面li標籤變動的時候，下面的div區塊就不跟著變了，於是我將js程式碼改了一下：

複製程式碼 程式碼如下:

為要用.each()迭代的li元素的選擇器加了限制，讓他只能找我選項卡中的li標籤來each出索引值，問題解決，可以睡覺了！