替代jQuery代码或HTML

假设你有一个有3列一个HTML表格，你想前两列是不同的字体大小的小说和最后或第三列是中等大小。现在，我在该列中有很多行说10行，这意味着我有30 <td>元素（3 x 10）。现在我不想为前两列中的每个<td>都设置一个类名称，该名称将包含小尺寸字体，并且第三列再次包含中等尺寸字体。但我不想为每个TD创建类属性/属性来实现这一点。所以，我创建一个jQuery做类似下面：替代jQuery代码或HTML

$(document).ready(function() { 
    $('table.secondtable td').each(function(index) { 
    if ((index+1)%3==0) { 
     $(this).addClass("mediumfont"); 
    } else { 
     $(this).addClass("smallfont"); 
    } 
    });        
});

这里是我创建的fiddle。

所以，我的问题是可以的，你有人告诉我这其中的HTML版本，而不必诉诸jQuery的或至少是一个更短的版本我的jQuery代码？

来源

2013-05-07 Edper

我认为你正在寻找的'第n-child'（这是工作无论是在jQuery的以及纯CSS）。看到这篇文章的一个开始：http://css-tricks.com/how-nth-child-works/ – m90 2013-05-07 05:44:46

您可能需要使用td:last-child

.smallfont {font-size:1.0em;} 
.mediumfont {font-size:1.5em;} 
td { font-size: 1.0em; } 
td:last-child { font-size: 1.5em; }

你的小提琴是在这里：http://jsfiddle.net/gG5Lt/

来源

2013-05-07 05:44:53 drinchev

这只会工作（在OP的意义上），如果是3列。 – m90 2013-05-07 05:50:29

你是不是专栏？ – drinchev 2013-05-07 05:51:16

谢谢！但我怎么能更具体到一个类的td：最后一个孩子，我不能做td.secondtable：最后一个孩子也没有td：last-child.secondtable？ – Edper 2013-05-07 05:52:24

您可以使用CSS3选择器:nth-child(index)这个..

见jsFiddle

td {font-size:1.0em;} 
td:nth-child(3) {font-size:1.5em;}

注意：O很少有现代浏览器支持这个属性。

来源

2013-05-07 05:47:59

试试这个：

td {font-size:1.0em;} 
td:nth-child(3n+3) {font-size:1.5em;}

读CSS3技巧http://css-tricks.com/how-nth-child-works/

来源

2013-05-07 05:51:22

替代jQuery代码或HTML

回答

相关问题