如何为连续的第二个div添加一个类答案

【问题标题】：How to add a class for every second div in a row如何为连续的第二个div添加一个类
【发布时间】：2018-01-31 04:05:31
【问题描述】：

我想连续每第二个项目添加一个类，请帮助，提前致谢

添加一些虚拟内容以满足其标准

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

【问题讨论】：

回答了类似的问题here
那是使用jquery的解决方案，我的是php
运行代码时当前发生了什么？
我需要在这个类的每一秒元素上创建一个类

标签： php wordpress

【解决方案1】：

使用这个，我创建了一个变量 $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;?>">

【讨论】：

【解决方案2】：

您指的是每秒查询一次的结果吗？如果是这样，这应该可行：

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

【讨论】：

【解决方案3】：

作为一个粗略的万能解决方案，您可以使用ternary 运算符加上modulo 运算符：

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

括号内的代码是：

如果$counter / 2 是一个整数（除法时没有余数）
然后返回$theThingYouWantToEcho
否则返回 null（无）

echo 语句将打印出结果。

您可以将 $theThingYouWantToEcho 替换为您要添加的 CSS 类

即

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

【讨论】：

【解决方案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");

所以通常你不需要类来分隔奇数/偶数元素。

【讨论】：