向循环中的每 4 个 div 添加一个类 [关闭]答案

【问题标题】：Add a class to every 4th div in loop [closed]向循环中的每 4 个 div 添加一个类 [关闭]
【发布时间】：2013-11-05 16:34:42
【问题描述】：

这是我的代码：

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

我想在这个循环中的每 4 个 div 中添加一个新类。我知道它可以用 Modulus 完成，但我无法让它工作。

谢谢！！！

【问题讨论】：

如果您知道，请尝试一下。如果它不起作用，请展示您尝试过的内容。
我在您的代码中没有看到任何模数尝试的迹象。
php modulus in a loop的可能重复

标签： php loops modulus modular

【解决方案1】：

<? 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 documentation

【讨论】：

您好 Oswaldo，感谢您的回复。看起来该类已添加到第一个 div 中。有没有办法将它添加到第 4、第 8、第 16 等等？
把$x % 4 === 0改成$x % 4 === 3

【解决方案2】：

为什么不直接使用 nth-child(4n)？ JSFiddle example.

<? 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;
}

【讨论】：

@jeroen 意思是写 4n+4 :/
不要吹毛求疵，但这与4n ;-)
@jeroen 实际上并不知道 :) 感谢您的提醒。
由于整个 IE8 问题，我想我不想使用 css

【解决方案3】：

我无法评论 Oswaldo 的回答，因为我还没有声望，但是如果您只是将“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>
<? } ?>

【讨论】：

【解决方案4】：

你不应该将 PHP 用于这种东西。这就是 CSS 的用途。假设你有一个容器和里面的 div，容器是divContainer。所以，在 CSS 中：

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

【讨论】：