PHP中具有不同div类的循环图像答案

【问题标题】：Images in loop with different div class in PHPPHP中具有不同div类的循环图像
【发布时间】：2012-09-26 14:35:03
【问题描述】：

假设我有如下代码

<?php 
$sql = "SELECT * FROM images";
$query = mysql_query($sql);

while($row = mysql_fetch_assoc($query)) {
    echo '<div class="single">';
    echo '<img src="'.$row['image'].'" alt="'.$row['title'].' " />';
    echo '</div>';
} 
?>

我想在每组 5 个图像的 div 类 <div class="single"> 中附加 first 和 last，即

<div class="single first">
    <img src="image1.jpg" alt="title1" />
</div>

<div class="single">
    <img src="image2.jpg" alt="title2" />
</div>

<div class="single">
    <img src="image3.jpg" alt="title3" />
</div>

<div class="single">
    <img src="image4.jpg" alt="title4" />
</div>

<div class="single last">
    <img src="image5.jpg" alt="title5" />
</div>

如何通过循环做到这一点，请帮助，

谢谢:)

【问题讨论】：

标签： php html css loops

【解决方案1】：

使用modulo：

<?php 
$sql = "SELECT * FROM images";
$query = mysql_query($sql);

$i = 0;
$class = "";

while($row = mysql_fetch_assoc($query)) {

    if($i % 5 == 0){
        $class = 'first';
    }else if($i % 5 == 4){
        $class = 'last';
    }else{
        $class = "";
    }

    echo '<div class="single ' . $class . '">';
    echo '<img src="'.$row['image'].'" alt="'.$row['title'].' " />';
    echo '</div>';

    $i++;
} 
?>

【讨论】：

您在$clas = 'last'; 有错字，您需要在class="single' 之后添加一个空格，否则这些课程会一起运行（例如class="singlelast"。
感谢您的回答，但无法显示class = "single last"请帮助
查看我的编辑 - 要检查“最后一个”，您需要检查 $i % 5 == 4 而不是 == -1 - PHP 不擅长代数：/

【解决方案2】：

<?php 
$sql = "SELECT * FROM images";
$query = mysql_query($sql);

$x=0; 
while($row = mysql_fetch_assoc($query)) {
    $x++;
    if ( $x == 1 ) { $c = ' first'; } 
        elseif ( $x == 5 ) { $c = ' last'; }
        else { $c = ''; }

    echo '<div class="single' . $c . '">';
    echo '<img src="'.$row['image'].'" alt="'.$row['title'].' " />';
    echo '</div>';
} 
?>

【讨论】：

感谢您的回答，但未显示class = "single first"
没错！我已经更新了代码，但看起来你已经让它工作了:)

【解决方案3】：

您需要计算您的迭代次数，并使用模函数来获得 5 的部分：

$sql = "SELECT * FROM images";
$query = mysql_query($sql);

$i = 0;
while($row = mysql_fetch_assoc($query)) {
    if($i % 5 == 0)
      echo '<div class="single first">';
    else if($i % 5 == 4) 
      echo '<div class="single last">';
    else
      echo '<div class="single">';
    echo '<img src="'.$row['image'].'" alt="'.$row['title'].' " />';
    echo '</div>';
    $i++;
}

【讨论】：

【解决方案4】：

这个怎么样：

$index = 0;
while($row = mysql_fetch_assoc($query)) {
    $classes = 'single';
    switch ($index % 5) {
      case 0:
        $classes .= ' first';
        break;
      case 4:
        $classes .= ' last';            
        break;
    }
    echo <<<HTML
<div class="$classes">
  <img src="{$row['image']}" alt="{$row['title']}" />
</div>;
HTML;

    $index++;
}

作为旁注，您是否考虑过改用 CSS nth-child 属性？

【讨论】：