php循环与复杂的html块

时间:2016-09-05 14:27:47

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

我有一组使用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个帖子

2 个答案:

答案 0 :(得分:1)

你可以通过在<div class="col-sm-6 height-auto">(充当幻灯片的那个)中启动循环然后关闭并打开它来检查每个帖子来实现这一点,例如它应该如下所示: / p>

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

希望我帮助过。

答案 1 :(得分:0)

这正是你想要的,我使用计数器来确定第一篇文章等等:

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