Question

我正在尝试将类first添加到行的第一个div，将类last添加到行的最后一个div。用户可以选择行中的div数并将其存储在变量中。 div的总数也是用户可选择的并存储在变量中。

这是我尝试过的，但它只将类添加到第一行而不是重复其余部分。

$number_of_cols = 4;  //User Selectable
$posts_per_page = 16; //User Selectable

$mas_query = new WP_Query( $args );

if ( $mas_query->have_posts() ) :
    $count = 0;
    while ( $mas_query->have_posts() ) : $mas_query->the_post();
        $count++; ?>
        <div class="blog-masonry-grid-items masonry-col-<?php echo $number_of_cols; echo ( $count == 1 || $count == $number_of_cols + 1 ? ' masonry-col-first' : ''); echo ( $count == $number_of_cols ? ' masonry-col-last' : '');?>">
            <div class="grid-item-image-wrap"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('medium_large'); } ?></div>
            <div class="grid-item-content-wrap"><?php the_title( '<h3 class="entry-title grid-entry-title">', '</h3>' );?></div>
        </div>
<?php endwhile; endif; ?>

如何以实用的方式重复所有div？

由于

Answer 1

您可以利用模运算符，除法后的余数：

while ( $mas_query->have_posts() ) : $mas_query->the_post();
    $count++;
    // Boolean values
    $firstOfRow = ($count % $number_of_cols === 1);
    $lastOfRow = ($count % $number_of_cols === 0);

当计数为1，5等时，余数为1，当计数为4，8等时，余数为0。

Answer 2

使用此代码它将适合您：

<div class="blog-masonry-grid-items masonry-col-<?php if($count == 1){ echo $number_of_cols.' masonry-col-first'; }else if{($count ==$number_of_cols) echo $number_of_cols.' masonry-col-last';}?>">
<div class="grid-item-image-wrap"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('medium_large'); } ?></div>
<div class="grid-item-content-wrap"><?php the_title( '<h3 class="entry-title grid-entry-title">', '</h3>' );?></div>
</div>

如何将“first”和“last”类添加到div行？

2 个答案: