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