如何使用 jQuery 设置第三个、第四个或第五个表格单元格的样式

Question

我知道使用 jQuery 设置奇数/偶数表格单元格的样式，但是如何设置第三个、第四个或第五个元素的样式？

<table width="300" border="0" cellspacing="0" cellpadding="0" id="Weekdays">
<thead>
  <tr>
    <td>Week Day</td>
    <td>Short Name</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Monday</td>
    <td>Mon</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>Tue</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Wed</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>Thr</td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>Fri</td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>Sat</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Sun</td>
  </tr>
</tbody>
</table>

我该怎么做？

Answer 1

使用 eq()：

$('td:eq(5)').css('background','red');

// OR:

$('td').eq(5).css('background','red');

这两个示例都会将第 6 个 TD 元素的背景着色为红色。

Answer 2

您可以使用 .slice() 从字面上获取元素范围（虽然我不是 100% 确定这就是你想要的），就像这样：

$("td").slice(2, 5).css("color", "red");​

你可以尝试一下这里将选择以下元素：

• Monday
• Mon
• ;星期二

所以我不确定你所说的元素是什么意思， 这是使用 rows 的版本，只需将 "td" 替换为 "tr" 即可。

Answer 3

$('#Weekdays tbody tr').each(function(i) {
   // Modify the style of element i here
});

Answer 4

$('tr:nth-child(5)').function();

关于 CS3，还有很多你不知道的事情:) http://www.w3 .org/TR/css3-selectors/

Answer 5

要选择任何元素的第 n 个到最后一个子元素，只需使用：

$("#mytable td").slice(n).hide()