【问题标题】:How do I add a class to every nth item in a php loop (wordpress)如何在 php 循环(wordpress)中为每个第 n 个项目添加一个类
【发布时间】:2012-09-23 18:28:16
【问题描述】:

我有一个如下的 Wordpress 循环:

<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="four columns">
        <?php the_content(); //along with other stuff in looped div ?>
    </div>
<?php endwhile ?>

如何使用 php 为每 (4n-3) 个 div (div.four.columns) 添加一个“alpha”类,并为每 (4n) 个项目添加一个“omega”类?

谢谢(非常感谢!), 杰米

【问题讨论】:

  • 保留一个计数器,从 0 开始,每次循环递增 1。那么如果counter % 3 == 0 那么它是“每第三个循环”。同样,counter % 4 == 0 表示“每 4 个循环”。根据需要做额外的数学运算。

标签: php css wordpress loops


【解决方案1】:

为什么不添加一个计数器并使用模数方法在每一列中了解您当前正在回显的元素。

假设您有 4 列指定。
你从 counter = 1 开始
1 % 4 = 1(你在第一个元素中)
2 % 4 = 2(你在第二个元素中)
3 % 4 = 3(你在第三个元素中)
4 % 4 = 0(你在第四个元素中)
5 % 4 = 1(你在第一个元素中)
6 % 4 = 2(你在第二个元素中)

您只需使用带有以下类的 If 语句

<?php $counter = 1 ?>
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="four columns <?php if ($counter % 4 == 1){echo 'alpha'}else if ($counter % 4 == 0){echo 'omega'} ?>">
        <?php the_content(); //along with other stuff in looped div ?>
    </div>
<?php $counter++ ; 
endwhile ?>

【讨论】:

    【解决方案2】:

    从制作的 cmets 实现:

    <?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
        <?php
            $i = 0;
            while ( $loop->have_posts() ) : $loop->the_post(); 
               if( $i % 4 == 0 )
                 $class = 'omega';
               else
                 $class = ''; 
            ?>
        <div class="four columns <?php echo $class ?>">
            <?php 
               the_content(); // Along with other stuff in looped div
               $i++;
            ?>
        </div>
    <?php endwhile ?>
    

    【讨论】:

    • 但您不会在每个循环中重置 $class。一旦出现$class = 'omega';$class 将永远是omega$class = ''; 应该在 while 循环内。
    猜你喜欢
    • 1970-01-01
    • 2016-07-19
    • 1970-01-01
    • 2016-04-29
    • 2014-08-10
    • 1970-01-01
    • 1970-01-01
    • 2021-02-28
    • 1970-01-01
    相关资源
    最近更新 更多