【问题标题】:PHP loop: Add a div with different class around every three items syntaxPHP循环:围绕每三个项目语法添加一个具有不同类的div
【发布时间】:2019-06-25 22:26:36
【问题描述】:

我想为我的帖子创建一个循环,将一个和类包装到每三个帖子组。棘手的部分是有 3 个不同的类需要保持循环。

所以,基本上它应该创建一个 div,其中包含一个“右”类环绕前 3 个帖子,然后创建一个带有“左”类的第二个 div 环绕下一个 3,第三个 div 环绕下一个 3之后的那些。

随着帖子的继续,这种模式需要重复。

它看起来像这样:

<div class="right">
  <div>Post 1</div>
  <div>Post 2</div>
  <div>Post 3</div>
</div>
<div class="left">
  <div>Post 4</div>
  <div>Post 5</div>
  <div>Post 6</div>
  <div class="inner-div"></div>
</div>
<div class="middle">
  <div>Post 7</div>
  <div>Post 8</div>
  <div>Post 9</div>
  <div class="inner-div"></div>
</div>

然后重复

我试过这个:PHP loop: Add a div around every three items syntax 但它只是添加第一类,然后重复第二类。

【问题讨论】:

  • 发布你迄今为止尝试过的代码

标签: php wordpress loops


【解决方案1】:

我已根据您的要求修改了您链接的参考答案。

原答案:PHP loop: Add a div around every three items syntax

<?php
    $i = 1;
    $j = 0;
    $target_class = array( 'right', 'left', 'middle' );

    //added before to ensure it gets opened
    echo '<div class="'.$target_class[$j].'">';
    if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();


         // Do whatever you want here.


         // if multiple of 3 close div and open a new div
         if($i % 3 == 0) {
            // echo inner div if target class is not right
            echo ( $j != 0 ? '<div class="inner-div"></div>' : '' );
            // send back to first position if it goes above the third position
            $k = ( ++$j == 3 ? 0 : $j );
            echo '</div><div class="'.$target_class[$k].'">';}

    $i++; endwhile; endif;
    //make sure open div is closed
    echo '</div>';
?>

这应该可行。不过没有测试。

编辑:经过测试和修复。代码正在运行

编辑:2更新代码以接受评论请求。

编辑:3更新代码以接受评论请求。

【讨论】:

  • 嗨@shazyriver,是的,非常感谢!有什么办法可以修改它以在左侧和中间 div 中添加一个 div?对php相当陌生,如果我问了一个愚蠢的问题,请原谅我。
  • 当然可以。更新了@LadyX 的代码,如果它适合您,请接受答案。
  • 我已接受您的回答,但尚未反映。我已经更新了代码,以向您展示我对内部额外 div 的含义。
  • 这很奇怪。它通常会立即显示接受。无论如何,我已经再次编辑了代码,它应该做你想要的。 @LadyX
  • 非常感谢!我看到它说只记录了 15 岁及以上的声誉
猜你喜欢
  • 2012-02-15
  • 1970-01-01
  • 1970-01-01
  • 2016-07-19
  • 1970-01-01
  • 2012-10-27
  • 2012-12-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多