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的css样式与其余的不同。

我的问题很简单：如何为第1，第2和第3个动态创建的div（具有class =“rocksType_DBitem”的div）添加3个不同的类？

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;
}

为特定的nth-childs添加不同的类名

2 个答案: