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

回答

相關問題