0

3 つの列を持つ HTML テーブルがあり、最初の 2 つの列を異なるフォント サイズ (小) にし、最後の列または 3 番目の列を中サイズにする必要があるとします。現在、その列には多くの行があり、10 行と表示されています。これは、30 個<td>の要素 (3 x 10) があることを意味します。<td>ここで、最初の 2 つの列のそれぞれに小さなサイズのフォントを使用し、3 番目の列に中サイズのフォントを使用するクラス名を付けたくありません。しかし、それを達成するためだけに、TDごとにクラス属性/プロパティを作成したくありません。そこで、以下のような jquery を作成しました。

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

そして、これが私が作成したフィドルです。

それで、私の質問は、jquery に頼ることなく、または少なくとも私の jquery コードのより短いバージョンに頼ることなく、この HTML バージョンを私に見せてくれる人はいますか?

4

3 に答える 3

1

あなたは使いたいかもしれません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-07T05:44:53.890 に答える
1

これには css3セレクターを使用できます。:nth-child(index)

jsFiddleを参照してください

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

注: このプロパティをサポートするのは最新のブラウザーのみです。

于 2013-05-07T05:47:59.350 に答える
0

これを試して：

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-07T05:51:22.267 に答える