如何根据td的位置添加不同的类到4列jquery

Question

我有下表。

<table> 
    <tr> 
     <td> 
<img src="images/kategoriimg1.jpg" /> 
<p>Forskerspiren</p> 
     </td> 
     <td> 
<img src="images/kategoriimg2.jpg" /> 
<p>Mangfold i naturen</p> 
     </td> 
     <td> 
<img src="images/kategoriimg3.jpg" /> 
<p>Kropp og helse</p> 
     </td> 
     <td> 
<img src="images/kategoriimg4.jpg" /> 
<p>Verdensrommet</p> 
     </td> 

    </tr> 
    <tr> 
     <td> 
<img src="images/kategoriimg5.jpg" /> 
<p>Fenomener og 
stoffer</p> 
     </td> 
     <td> 
<img src="images/kategoriimg6.jpg" /> 
<p>bla</p> 
     </td> 
     <td> 
<img src="images/kategoriimg7.jpg" /> 
    <p>bla</p> 
     </td> 
     <td> 
<img src="images/kategoriimg8.jpg" /> 
<p>bla</p> 
     </td> 

    </tr> 
    ..... 
    ..... 
    // more tr and td with images like above 
    .... 


</table> 

现在我想首先向所有第一TDS，grid_3中间所有的第二和第三TDS和中间及grid_3欧米茄添加类grid_3，阿尔法最后像这样的jQuery都出去TDS。

<table> 
    <tr> 
     <td class="grid_3 alpha first"> 
<img src="images/kategoriimg1.jpg" /> 
<p>Forskerspiren</p> 
     </td> 
     <td class="grid_3 middle"> 
<img src="images/kategoriimg2.jpg" /> 
<p>Mangfold i naturen</p> 
     </td> 
     <td class="grid_3 middle"> 
<img src="images/kategoriimg3.jpg" /> 
<p>Kropp og helse</p> 
     </td> 
     <td class="grid_3 omega last"> 
<img src="images/kategoriimg4.jpg" /> 
<p>Verdensrommet</p> 
     </td> 

    </tr> 
    <tr> 
     <td class="grid_3 alpha first"> 
<img src="images/kategoriimg5.jpg" /> 
<p>Forskerspiren</p> 
     </td> 
     <td class="grid_3 middle"> 
<img src="images/kategoriimg6.jpg" /> 
<p>Mangfold i naturen</p> 
     </td> 
     <td class="grid_3 middle"> 
<img src="images/kategoriimg7.jpg" /> 
<p>Kropp og helse</p> 
     </td> 
     <td class="grid_3 omega last"> 
<img src="images/kategoriimg8.jpg" /> 
<p>Verdensrommet</p> 
     </td> 

    </tr> 
    .... 
    .... 



</table> 

我感谢您的帮助。

在此先感谢。

Answer 1

var $td = $('td').addClass('grid_3'); 
    $td.filter(':not(:first-child,:last-child)').addClass('middle'); 
    $td.filter(':first-child').addClass('first alpha'); 
    $td.filter(':last-child').addClass('last omega'); 

Answer 2

甚至不使用jQuery :)。使用CSS3第n个孩子选择：

http://www.w3.org/TR/css3-selectors/

Answer 3

$('table tr td').addClass('grid_3'); 
$('table tr td:nth-child(0)').addClass('alpha first'); 
$('table tr td:nth-child(1)').addClass('middle'); 
$('table tr td:nth-child(2)').addClass('middle'); 
$('table tr td:nth-child(3)').addClass('omega last'); 

Answer 4

尝试......

$("table tr").each(function(){ 
    $(this).find("td:eq(0)").attr("class","grid_3 alpha first"); 
    $(this).find("td:eq(1),td:eq(2)").attr("class","grid_3 middle"); 
    $(this).find("td:eq(3)").attr("class","grid_3 omega last"); 
});