1

商品リストページに商品を表示するためのdivの数が定義されていません。各行には、商品ごとに1つずつ、合計4つのdivがあります。私が必要としているのは、CSSクラスを各行の最初のdivに割り当て、次に別のCSSクラスを各行の2番目のdivに割り当てることです。CSSとおそらくjQueryでこれを行うことができると確信していますが、手がかりはありません。何を検索するか。

目的の出力は次のようになります。

<div> //row1
  <div id="1" class="grid1"> Product 1 </div>
  <div id="2" class="grid2"> Product 2 </div>
  <div id="3" class="grid3"> Product 3 </div>
  <div id="4" class="grid4"> Product 4 </div>
</div>
<div> //row 2
  <div id="5" class="grid1"> Product 5 </div>
  <div id="6" class="grid2"> Product 6 </div>
  <div id="7" class="grid3"> Product 7 </div>
  <div id="8" class="grid4"> Product 8 </div>
<div>
...

正しい方向へのポイントは大歓迎です。

4

1 に答える 1

2

プレーンな CSS でこれを行うことができます (クラスは必要ありません)。

div > div:nth-child(1) { ... }
div > div:nth-child(2) { ... }
div > div:nth-child(3) { ... }
div > div:nth-child(4) { ... }

jQuery ベースのソリューションは次のようになります。行レベルの div があると仮定していることに注意してくださいclass="row"。

$('div.row > div').each(function() {
    $(this).addClass('grid' + ($(this).index() + 1));
});
于 2012-08-28T16:23:07.687 に答える