Цикл Foreach, чтобы не нарушать структуру HTML — переполнение стека

У меня есть простой код HTML / CSS, который должен отображать 5 наиболее часто используемых браузеров на сайте.
HTML:

<div class="content">
<div class="browserStat big">
<img src="{$basePath}/img/browser-chrome-big.png" alt="Chrome">
<span>36%</span>
</div>
<div class="browserStat big">
<img src="{$basePath}/img/browser-firefox-big.png" alt="Firefox">
<span>34%</span>
</div>
<div class="browserStat">
<img src="{$basePath}/img/browser-ie.png" alt="Internet Explorer">
<span>34%</span>
</div>
<div class="browserStat">
<img src="{$basePath}/img/browser-safari.png" alt="Safari">
<span>34%</span>
</div>
<div class="browserStat">
<img src="{$basePath}/img/browser-opera.png" alt="Opera">
<span>34%</span>
</div>
</div>

У меня также есть все проценты и браузеры в моем массиве из базы данных (браузеры сохраняются в виде чисел, например, 1 = IE, 2 = Chrome и т. Д.)

Я могу легко повторить это как:

foreach($borowser as $elem){
echo '<div>
<div class="country">'.$elem["borowser"].'</div>
<div class="number">'.$elem["number"].'</div>
</div>';
}

В общем, похоже, у меня есть все, что нужно, но у меня проблема с написанием правильного цикла, который не разбивает этот HTML / CSS, потому что он всегда должен иметь только 2 браузера с big класс и 3 без big учебный класс.

Может кто-нибудь помочь мне написать цикл, который не сломает этот HTML / CSS?

0

Решение

Попробуйте этот скрипт:

$i = 0;
foreach($borowser as $elem){
$is_big = ($i < 2) ? 'big' : '';
echo '<div class="browserStat ' . $is_big . '">
<div class="country">'.$elem["borowser"].'</div>
<div class="number">'.$elem["number"].'</div>
</div>';
$i++;
}
1

Другие решения

Вы могли бы иметь дополнительный элемент в $elem только для ваших занятий. Тогда все, что вам нужно

foreach($browser as $elem) {
echo '<div class="'.$elem['class'].'">
<div class="country">'.$elem["borowser"].'</div>
<div class="number">'.$elem["number"].'</div>
</div>';
}

Изменить: Если это так, что всегда первые два нуждаются в вашем дополнительном классе, используйте подход Ананта.

0

По вопросам рекламы [email protected]