循环的第1次和第3次迭代

Question

I'm making an update to an old client WP site (hence the 960.gs grid) and have a loop to output a lost of news items.

What I am trying to achieve (with an if statement) is to set the .alpha class to the 1st item as well as numbers 4, 7, 10, 13... etc. I am also trying to apply .omega to 3, 6, 9, 12... etc

Here is my if statement with modulus operators: <?php if ($count % 1 == 0) : ?>alpha <?php endif; ?>grid_4<?php if ($count % 3 == 0) : ?> omega<?php endif; ?> <?php if ($count % 1 == 0) : ?>alpha <?php endif; ?>grid_4<?php if ($count % 3 == 0) : ?> omega<?php endif; ?>

But this is giving me the following:

<div class="feed">

    <div class="alpha grid_4">

        <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin.</p>

    </div>

    <div class="alpha grid_4">

        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing […]</p>

    </div>  

    <div class="alpha grid_4 omega">

        <p>Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue […]</p>

    </div>

    <div class="alpha grid_4">

        <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent […]</p>

    </div>

    <div class="alpha grid_4">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla […]</p>

    </div>

    <div class="alpha grid_4 omega">

        <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia. Curab itur vulputate, ligula […]</p>

    </div>

    <div class="alpha grid_4">

        <p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum […]</p>

    </div>

</div>

As you can see, .omega appears to be working correctly, but .alpha is getting applied to every element.

Answer 1

You are dividing by 1, so alpha is applied everywhere.

Change if statement for alpha like this:

<?php if ($count % 3 == 1) : ?>alpha <?php endif; ?>grid_4<?php if ($count % 3 == 0) : ?> omega<?php endif; ?>

Answer 2

A solution might be :

<?php if ($count == 0 ) : ?>alpha <?php endif; ?>grid_4<?php if ($count % 3 == 0) : ?> omega<?php endif; ?>

In a nutshell, the modulus (%) operation with a 1 operand will return 0 on any number, since any integer can be divided by 1 (result being the number itself, so the modulus is zero).