У меня есть простой код 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?
Попробуйте этот скрипт:
$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++;
}
Вы могли бы иметь дополнительный элемент в $elem
только для ваших занятий. Тогда все, что вам нужно
foreach($browser as $elem) {
echo '<div class="'.$elem['class'].'">
<div class="country">'.$elem["borowser"].'</div>
<div class="number">'.$elem["number"].'</div>
</div>';
}
Изменить: Если это так, что всегда первые два нуждаются в вашем дополнительном классе, используйте подход Ананта.