CODEWITHSUNDEEP
phphtml
Luis
Luis

Reputation: 437

Adding class to a foreach loop every N times

I have an users list, each user is wrapped by a div, this way

<div class="users">
    <div>user 1 content</div>
    <div>user 2 content</div>
    <div>user 3 content</div>
    <div>user 4 content</div>...
</div>

then all are displayed this way:

1 2 3
4 5 6
7 8 9
10 11 12
13 14 15
...... and so on

divs numbers 1,4,7,10.. should have a class called class_left for instance, divs numbers 2,5,8,11,14.. should have a class called class_center and divs numbers 3,6,9,12,15... should have a class called class_right

I am not quite sure how to do it. Thank you.

Upvotes: 0

Views: 1480

Answers (7)

Matthias Wiehl
Matthias Wiehl

Reputation: 1998

This code works for any number of div elements per row. (If you set $divsPerRow to 2, class_center will not be used. If you set it to 1, neither will class_right.)

$divsPerRow = 3;
$users = range(1, $divsPerRow * 3);

echo '<div class="users">' . PHP_EOL;
for ($i = 0; $i < count($users); $i++) {
    $class = "left";
    $column = $i % $divsPerRow + 1;
    if ($column > 1) {
        $class = ($column == $divsPerRow) ? "right" : "center";
    }
    echo '<div class="class_' . $class . '">user ' . $users[$i]
        . ' content</div>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;

Upvotes: 0

Kamrul Khan
Kamrul Khan

Reputation: 3350

Try this:

$i = 1;
$last = 100;

for ($i =1; $i<$last; $i=+3) {
    echo "<div class='class_left'>user ".$i." content</div>";
    echo "<div class='class_center'>user ".($i+1)." content</div>";
    echo "<div class='class_right'>user ".($i+2)." content</div>";
}

Or if you want a function that will take the number and return the class name you should try something like:

    function getClass($num) {
    if (!$num % 3) {
        return 'class_right';
    }

    if (!($num + 1) % 3) {
        return 'class_center';
    }

    if (!($num + 2) % 3) {
        return 'class_left'
    }

}

Upvotes: 0

Chin Leung
Chin Leung

Reputation: 14921

Suppose that $data is your array of data:

<?php $aligns = array('right', 'left', 'center'); ?>

<div class="users">
    <?php foreach($data as $key => $value): ?>
        <div class="class_<?php echo $aligns[$key % 3]; ?>">
            <?php var_dump($value); ?> // User X's Content          
        </div>
    <?php endforeach; ?>
</div>

Upvotes: 1

Kacper Polak
Kacper Polak

Reputation: 1411

Maybe try this way:

var curr = 0;
users.forEach(user){
      curr++;
      switch(curr){
        case 1:
          user.class = 'class_left';
        case 2:
          user.class = 'class_center';
        case 3:
          user.class = 'class_right';
          curr = 0;
      }
}

This is only javascript example. Please use your language.

Upvotes: 0

stuzzo
stuzzo

Reputation: 1066

I don't know how you're using your code, but you can use modulus operator in this way: if column number modulus 3 is 1 then you're on the left, else if the result is 2 you're on the center, else with result equal 0, you're on the right.

Upvotes: 1

Oleg Imanilov
Oleg Imanilov

Reputation: 2751

What is you looking for is:

(i-1)%3 == 0

Upvotes: -1

Ravi Shankar Bharti
Ravi Shankar Bharti

Reputation: 9268

You can simply do this by using modulus operator with 3.

Here is a pseudo code:

if(div_number % 3 ==1)
   class = class_left;
else if(div_number % 3 == 2)
   class = class_center;
else
   class=class_right;

Upvotes: 1

Related Questions