如何在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); 
     }); 
    }); 
});