带有复杂 html 块的 php 循环答案

【问题标题】：php loop with complex html blocks带有复杂 html 块的 php 循环
【发布时间】：2017-01-12 22:49:57
【问题描述】：

我有一组使用 jquery 移动的 html 块，我需要在其中创建 $posts 数组的正确循环，我花了几天时间试图使其正确，但它对我不起作用。

预期的输出应该是 like this

这是我的代码

                    <?php if(!empty($posts)): ?>
                    <?php $count = 1; $countposts = count($posts); ?>

                    <?php for ($x = 0; $x <= $countposts; $x++): ?>
                        <?php if($x == 0): ?>
                            <div class="col-xs-12 col-sm-6 height-auto">
                        <?php else: ?>
                            <div class="col-sm-6 height-auto">
                        <?php endif; ?>

                            <?php foreach($posts as $post): ?>
                                <div class="col-sm-12 boxed no-padding-left">
                                    <div class="col-sm-3 no-padding-left artical-thumb">

                                    </div>
                                    <div class="col-sm-9 padding-bottom-10">
                                        <h4 class="text-right text-primary">post title</h4>
                                        <h6 class="text-right">author name</h6>
                                        <p class="text-right">
                                            description text
                                        </p>
                                        <a href="#">more</a>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endfor; ?>
                <?php $count++; endif; ?>

这是我需要的 HTML 输出

                    <div class="col-xs-12 col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>

                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>

                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>

                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

请注意这里的主要块第一个看起来像这样

<div class="col-xs-12 col-sm-6 height-auto">

但其他人是

<div class="col-sm-6 height-auto">

同样在每个主区块内只有 2 个帖子

【问题讨论】：

你能贴出你的代码示例吗，你说的php代码在哪里？？如果您能更详细地描述您的问题和预期输出，那就太好了..
你是对的，对不起，我刚刚添加了我的 php 代码，我需要的输出是我的问题中已有的 html 代码示例
这是一个显示预期输出的页面shetewy.website/site/blog-section.html

标签： php loops for-loop foreach while-loop

【解决方案1】：

这正是你想要的，我使用计数器来确定第一个帖子等等：

<?php
$Posts = [
    [
        'title'  => 'title',
        'author' => 'author',
        'desc'   => 'desc',
        'link'   => 'link',
    ],
    [
        'title'  => 'title',
        'author' => 'author',
        'desc'   => 'desc',
        'link'   => 'link',
    ],
];

$Count = 0;
?>

<?php foreach( $Posts as $Post ) { ?>
    <?php if ($Count == 0) {?>
        <div class="col-xs-12 col-sm-6 height-auto">
            <div class="col-sm-12 boxed no-padding-left">
                <div class="col-sm-3 no-padding-left artical-thumb">
                </div>
                <div class="col-sm-9 padding-bottom-10">
                    <h4 class="text-right text-primary">
                        post title
                    </h4>
                    <h6 class="text-right">
                        author name
                    </h6>
                    <p class="text-right">
                        description text
                    </p>
                    <a href="#">
                        more
                    </a>
                </div>
            </div>
            <div class="col-sm-12 boxed no-padding-left">
                <div class="col-sm-3 no-padding-left artical-thumb">
                </div>
                <div class="col-sm-9 padding-bottom-10">
                    <h4 class="text-right text-primary">
                        post title
                    </h4>
                    <h6 class="text-right">
                        author name
                    </h6>
                    <p class="text-right">
                        description text
                    </p>
                    <a href="#">
                        more
                    </a>
                </div>
            </div>
        </div>
    <?php } else { ?>
    <div class="col-sm-6 height-auto">
        <div class="col-sm-12 boxed no-padding-left">
            <div class="col-sm-3 no-padding-left artical-thumb">
            </div>
            <div class="col-sm-9 padding-bottom-10">
                <h4 class="text-right text-primary">
                    post title
                </h4>
                <h6 class="text-right">
                    author name
                </h6>
                <p class="text-right">
                    description text
                </p>
                <a href="#">
                    more
                </a>
            </div>
        </div>
        <div class="col-sm-12 boxed no-padding-left">
            <div class="col-sm-3 no-padding-left artical-thumb">
            </div>
            <div class="col-sm-9 padding-bottom-10">
                <h4 class="text-right text-primary">
                    post title
                </h4>
                <h6 class="text-right">
                    author name
                </h6>
                <p class="text-right">
                    description text
                </p>
                <a href="#">
                    more
                </a>
            </div>
        </div>
    </div>
    <?php } ?>
    <?php $Count++; ?>
<?php } ?>

【讨论】：

但是你的循环是在主要的 html 容器上，每个容器必须有 2 个帖子，如你所见.. 所以这个循环将根据帖子编号生成容器，每个容器内有 2 个静态帖子
那么，我应该看到整页 html 来帮助你

【解决方案2】：

您可以简单地通过在此<div class="col-sm-6 height-auto">（用作幻灯片的那个）中启动循环然后关闭并打开它并检查每 2 个帖子，例如它应该如下所示：

            <div class="col-xs-12 col-sm-6 height-auto">
                <?php $counter = 0; foreach($posts as $post) : $counter++; ?>
                <div class="col-sm-12 boxed no-padding-left">
                    <div class="col-sm-3 no-padding-left artical-thumb"></div>
                    <div class="col-sm-9 padding-bottom-10">
                        <h4 class="text-right text-primary">post title</h4>
                        <h6 class="text-right">author name</h6>
                        <p class="text-right">
                            description text
                        </p>
                        <a href="#">more</a>
                    </div>
                </div>
                <?php if($counter == 2) : $counter = 0; ?>
                    </div><div class="col-sm-6 height-auto">
                <?php endif; ?>
                <?php endforeach; ?>
            </div>

希望我能帮上忙。

【讨论】：