How to style 3rd, 4th or 5th table cell using jQuery

Question

I know to style odd / even table cells using jQuery, but how do i style the 3rd, 4th or 5th element?

<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>

How do i do it?

Answer 1

Using eq():

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

// OR:

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

Both of those examples would color the 6th TD element's background in red.

Answer 2

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

Answer 3

You can use .slice() to literally get an element range (though I'm not 100% sure that's what you're after), like this:

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

You can give it a try here this would select the following elements:

• <td>Monday</td>
• <td>Mon</td>
• <td>Tuesday</td>

So I'm not sure what you mean by the element, here's a version using rows, just swap "td" for "tr" to get this.

Answer 4

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

Theres a lot of things you don't know about CS3 :) http://www.w3.org/TR/css3-selectors/