Question

我想添加一个类＆＃34;首先＆＃34;在wordpress循环中的第五列的第一列。请参阅下面的示例

<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

我尝试过这样的事情，但似乎没有效果

global $wp_query;
$wp_query = new WP_Query( $args );      
if ( have_posts() ) :               
echo '<div class="row">';           
while ( have_posts() ) : the_post();        
for ($i=0; $i<$num_list; $i++) {
    if ($i % 5 == 1) {
         echo '<div class="box first"></div>';
    } else {
         echo '<div class="box"></div>';
    }
}   
endwhile;
echo '</div>';
endif;
wp_reset_query();

Answer 1

使用modulo是一个不错的选择。但应该比较为零而不是一个：

for ($i=0; $i<$num_list; $i++) {
    if ($i % 5 == 0) {
         echo '<div class="box first"></div>';
    } else {
         echo '<div class="box"></div>';
    }
}

Answer 2

您可以在不添加特殊类的情况下获得相同的结果，但可以设置与每个第5个元素匹配的规则。这是一个例子：

.box{
  border: 1px solid black;
  width: 20px;
  height: 20px;
  margin: 3px;
}
.box:nth-child(5n+1){
  border: 1px solid red;
  background-color: #e5e5e5;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

在循环中每隔nth添加一次类

2 个答案: