如何使用 jQuery 在每个表格单元格中设置增量 CSS 类？

Question

我有一个通过数据库填充的表，它的呈现方式如下（它可以有任意数量的引用“时间”的列，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，我想遍历每个表行并仅在“class='time'”的表单元格上增量设置附加类名，以便结果为：

<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);
         }); 
     });
});