如何連續每隔div添加一個類

Question

我想連續第二個項目增加一個班級，請幫忙，謝謝

添加一些虛擬內容以滿足其條件

<?php $counter = 1 ?> 
     <div class="services-posts mt2 pull-right">
      <?php
       $args = array( 'post_type' => 'services');
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <?php $featured_img_url = get_the_post_thumbnail_url('full');  ?>
                <div class="col-sm-4 <?php if ($counter % 2 == 0) : ?> animation-fadeInUp <?php endif; ?> <?php if ($counter % 1 == 0) : ?> animation-fadeInLeft <?php endif; ?> <?php if ($counter % 3 == 0) : ?> animation-fadeInRight <?php endif; ?> "  >
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                    /*I need to add a class to the each second box-div2 div */
                     <div style="background-image: url('<?php echo $image[0]; ?>')"   class="box-div2">
                     <?php endif; ?>
                    <div class="c-div">
                        <a href="">
                            <h4><?php the_title(); ?></h4>
                            <span>
                                <?php the_content(); ?>
                            </span>
                    </a>
                        </div>
                    </div>
                </div>
                 <?php if ($counter % 3 == 0){echo '</div><div class="services-posts mt2 pull-right">';} ?> 
                  <?php $counter++ ; ?>
                <?php endwhile; ?> 

Answer 1

您是否每隔一秒查詢一次查詢結果？ 如果是這樣，這應該起作用：

<?php $div2_class = $counter % 2 == 0 ? 'your-class' : ''; ?>
<div style="background-image: url('<?php echo $image[0]; ?>')" class="box-div2 <?php echo $div2_class; ?>">

Answer 2

作為全面的解決方案，您可以使用三元運算符加上模運算符：

<?php echo (($counter % 2 == 0) ? $theThingYouWantToEcho : null) ?>

方括號內的代碼說明：

• 如果$counter / 2是整數（除法后沒有余數）
• 然后返回$theThingYouWantToEcho
• 否則返回null（無）

然后，echo語句將打印出結果。

您可以將$theThingYouWantToEcho替換$theThingYouWantToEcho要添加的CSS類

即

<div class="<?php echo (($counter % 2 == 0) ? 'myClass' : null) ?>">...</div>

Answer 3

使用這個，我創建了一個變量$ divclass，它將相應地添加該類。

更換：

/*I need to add a class to the each second box-div2 div */
<div style="background-image: url('<?php echo $image[0]; ?>')"   class="box-div2">

附：

<?php 
    $divclass="";
    if ($counter%2==0) {
        $divclass="box-div2";
    }
?>
<div style="background-image: url('<?php echo $image[0]; ?>')"   class="<?php echo $divclass;?>">

Answer 4

我不是您這樣做的原因，但是如果出於樣式目的，CSS允許您選擇偶/奇元素：

a:nth-child(odd) {
    background: green;
}

a:nth-child(even) {
    background: red;
}

使用公式(an + b)您甚至可以使用其他循環，而不僅僅是奇/偶。

另一方面，如果出於編程原因，jQuery也具有奇/偶選擇器：

$("tr:odd").css("background-color", "green");
$("tr:even").css("background-color", "red"); 

因此，通常您不需要類來分隔奇/偶元素。