php - ループ内の 4 番目の div ごとにクラスを追加します

Question

これが私のコードです：

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item">
        <img src="images/image.jpg" />
    </div>
<? } ?>

このループの 4 番目の div ごとに新しいクラスを追加したいと思います。Modulusでできることはわかっていますが、うまくいきません。

ありがとう！！！

Answer 1

nth-child(4n) を使用しないのはなぜですか? JSFiddle の例。

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item">
        <img src="images/image.jpg" />
    </div>
<? } ?>

……変わらない。そしてあなたのCSSで：

div.meeting-item:nth-child(4n){
    background-color:#EEE;
}

Answer 2

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item <?= $x % 4 === 0 ? 'my-class' : null ?>">
        <img src="images/image.jpg" />
    </div>
<? } ?>

PHP ドキュメント

Answer 3

私はまだ評判がないので、オズワルドの答えについてコメントすることはできませんが、「0」を 3 に置き換えるだけで、クラスが 4 番目 8 番目などに追加されます.

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item <?= $x % 4 === 3 ? 'my-class' : null ?>">
    <img src="images/image.jpg" />
</div>
<? } ?>

Answer 4

この種のものに PHP を使うべきではありません。そのためのCSSです。コンテナとその中に div があるとしましょう。コンテナはdivContainer. したがって、CSS では次のようになります。

#divContainer div .meeting-item:nth-child(4n+4){
   //apply style.
 }