php - 将不同的类名添加到特定的 nth-childs

Question

我有这个代码（PHP）：

<div class="rocksType_DBitems_container">
  <?php
    define ('ACCESS', 1);           
    require_once 'database.php';       
    $db = new Database();           
    $sql = 'SELECT Drn,Src,Tit,Sub FROM Img_Ardosias WHERE Drn > :id';             
    $parameters = array(':id' => 0);
    $results = $db->getArray($sql, $parameters);
    foreach ($results as $index => $result){
      $html = '<div class="rocksType_DBitem">
                 <p>
                 <span class="rocksType_title">'.$result['Tit'].'</span>
                 <br/>
                 <span class="rocksType_subtitle">'.$result['Sub'].'</span>
                 </p>
                 <img class="rocksType_image" src="'.$result['Src'].'" alt="" />
               </div>';
      echo $html;
    }
  ?>
</div> <!-- End of class="rocksType_DBitems_container" -->

... 基本上，在垂直布局中动态创建几个带有图像和文本的 div，其中前 3 个 div 具有与其他 div 不同的 css 样式。

我的问题很简单：如何将 3 个不同的类添加到第一个、第二个和第三个动态创建的 div（具有 class="rocksType_DBitem 的那些）？

Answer 1

定义要添加的类：

$classes = array('green', 'blue', 'yellow');

并稍微修改您的脚本：

foreach ($results as $index => $result){
    $classAdd = $classes ? ' rocksType_DBitem_' . array_shift($classes) : '';
    $html = '<div class="rocksType_DBitem' . $classAdd . '">

所以前 3 个 div 将有类 'rocksType_DBitem_green'、'rocksType_DBitem_blue'、'rocksType_DBitem_yellow' + 'rocksType_DBitem' 其余只有类 'rocksType_DBitem'

Answer 2

我将添加到您的代码中

$results = $db->getArray($sql, $parameters);    

extraClasses = array('green', 'blue', 'yellow');
i = 0;
foreach ($results as $index => $result){
  extraClass = '';
  if (i<3) {
      extraClass = extraClasses[i];
      i++;
  }

  $html = '<div class="rocksType_DBitem "'+extraClass+'">
             <p>
             <span class="rocksType_title">'.$result['Tit'].'</span>
             <br/>
             <span class="rocksType_subtitle">'.$result['Sub'].'</span>
             </p>
             <img class="rocksType_image" src="'.$result['Src'].'" alt="" />
           </div>';
  echo $html;
}