如何在jQuery中爲每個Table Cell設置增量CSS類？

Question

我有經由DB填充的表，並將其呈現像這樣（它可以具有任何數量的指「時間」列，5列，8列，2列，等等）：

<table id="eventInfo"> 
<tr> 
    <td class="name">John</td> 
    <td class="date">Dec 20</td> 
    <td class="**time**">2pm</td> 
    <td class="**time**">3pm</td> 
    <td class="**time**">4pm</td> 
    <td class="event">Birthday</td>     
</tr> 
<tr> 
    <td class="name">Billy</td> 
    <td class="date">Dec 19</td> 
    <td class="**time**">6pm</td> 
    <td class="**time**">7pm</td> 
    <td class="**time**">8pm</td> 
    <td class="event">Birthday</td>   
</tr> 

使用jQuery，我想經過每個錶行，並僅在表格單元格增量設置附加類的名稱，其中「類=‘時間’」，這樣的結果將是：

<table id="eventInfo"> 
<tr> 
    <td class="name">John</td> 
    <td class="date">Dec 20</td> 
    <td class="**time** **timenum-1**">2pm</td> 
    <td class="**time** **timenum-2**">3pm</td> 
    <td class="**time** **timenum-3**">4pm</td> 
    <td class="event">Birthday</td>     
</tr> 
<tr> 
    <td class="name">Billy</td> 
    <td class="date">Dec 19</td> 
    <td class="**time** **timenum-1**">6pm</td> 
    <td class="**time** **timenum-2**">7pm</td> 
    <td class="**time** **timenum-3**">8pm</td> 
    <td class="event">Birthday</td>   
</tr> 

我只能得到它來計算所有的表格單元格，其中「class ='time'」，而不是每個表格在其自己的表格行中設置。這是我嘗試過用jQuery：

$(document).ready(function() { 

    $("table#eventInfo tr").each(function() { 
      var tcount = 0; 
      $("td.time").attr("class", function() { 
       return "timenum-" + tcount++; 
      }) 
      //writes out the results in each TD 
      .each(function() { 
       $("span", this).html("(class = '<b>" + this.className + "</b>')"); 
      });  

     }); 

    }); 

不幸的是，這不僅導致：

<table id="eventInfo"> 
<tr> 
    <td class="name">John</td> 
    <td class="date">Dec 20</td> 
    <td class="**time** **timenum-1**">2pm</td> 
    <td class="**time** **timenum-2**">3pm</td> 
    <td class="**time** **timenum-3**">4pm</td> 
    <td class="event">Birthday</td>     
</tr> 
<tr> 
    <td class="name">Billy</td> 
    <td class="date">Dec 19</td> 
    <td class="**time** **timenum-4**">6pm</td> 
    <td class="**time** **timenum-5**">7pm</td> 
    <td class="**time** **timenum-6**">8pm</td> 
    <td class="event">Birthday</td>   
</tr> 

感謝您的幫助！

Answer 1

$("td.time")選擇全部表格單元格time不僅在那一行。參考該行添加爲（第二）上下文參數，就像你在其他each環做：$("td.time", this)

Answer 2

$(document).ready(function() { 
    $("table#eventInfo tr").each(function() { 
     $(this).children('td').addClass(function (index) { 
      return 'timenum-' + (index + 1); 
     }); 
    }); 
});