ProcessWire foreach 循环以在每行中显示 4 列
ProcessWire foreach loop to show 4 colums in each row
我已经在该网站上工作了一段时间,并且在创建特定的 foreach 循环时偶然发现了一个问题。我正在使用 ProcessWire 为网站创建 CMS。我想在每一行中显示 4 列,但我感到困惑。到目前为止,这是我的代码;
<div class="container">
<? $count == 0; ?>
<? foreach($page->events_tickets as $cols): ?>
<!-- portfolio item -->
<? if ($count % 4 == 0)
echo "<div class='row'>";
?>
<? for($count = 0; $count < 4; $count++) { ?>
<div class="span3 project-item graphics box">
<div class="thumbnail" >
<!-- IMAGE CONTAINER-->
<a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
<img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" />
</a>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="caption">
<h4 class=""><?=$cols->event_title;?></h4>
<p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
<?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a>
</p>
</div><!--END CAPTION -->
</div><!-- END: THUMBNAIL -->
</div><!-- END: portfolio item -->
<? if($count % 1 = 1 ) break;} ?>
</div> <!--END OF ROW-->
<? endforeach; ?>
没关系,我终于找到了解决方法。我决定 运行 通过条件 if else 语句的循环,而不是使用嵌套循环。
<div class="row">
<? foreach($page->events_tickets as $cols): ?>
<? if($cols->event_num % 4 != 0) {?>
<!-- portfolio item -->
<div class="span3 project-item graphics box">
<div class="thumbnail" >
<!-- IMAGE CONTAINER-->
<a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
<img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" />
</a>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="caption">
<h4 class=""><?=$cols->event_title;?></h4>
<p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
<?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a>
</p>
</div><!--END CAPTION -->
</div><!-- END: THUMBNAIL -->
</div><!-- END: portfolio item -->
<? } else if($cols->event_num%4 == 0) {?>
<div class="row">
<div class="span3 project-item graphics box">
<div class="thumbnail" >
<!-- IMAGE CONTAINER-->
<a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
<img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" />
</a>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="caption">
<h4 class=""><?=$cols->event_title;?></h4>
<p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
<?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a>
</p>
</div><!--END CAPTION -->
</div><!-- END: THUMBNAIL -->
</div><!-- END: portfolio item -->
</div> <!--END OF ROW-->
<? } ?>
<? endforeach; ?>
</div> <!--END OF ROW-->
我在 events_tickets
字段中添加了额外的字段并将其命名为 events_num
。 events_num
从 1 开始,一直到记录结束。<? if($cols->event_num % 4 != 0) {?>
然后显示 4 列。然后如果数字达到 5 除以 4 的余数是奇数,因此它创建 <div class="row">
并显示另外 4 列。然后这个过程继续。因此不需要创建嵌套循环。
我已经在该网站上工作了一段时间,并且在创建特定的 foreach 循环时偶然发现了一个问题。我正在使用 ProcessWire 为网站创建 CMS。我想在每一行中显示 4 列,但我感到困惑。到目前为止,这是我的代码;
<div class="container">
<? $count == 0; ?>
<? foreach($page->events_tickets as $cols): ?>
<!-- portfolio item -->
<? if ($count % 4 == 0)
echo "<div class='row'>";
?>
<? for($count = 0; $count < 4; $count++) { ?>
<div class="span3 project-item graphics box">
<div class="thumbnail" >
<!-- IMAGE CONTAINER-->
<a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
<img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" />
</a>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="caption">
<h4 class=""><?=$cols->event_title;?></h4>
<p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
<?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a>
</p>
</div><!--END CAPTION -->
</div><!-- END: THUMBNAIL -->
</div><!-- END: portfolio item -->
<? if($count % 1 = 1 ) break;} ?>
</div> <!--END OF ROW-->
<? endforeach; ?>
没关系,我终于找到了解决方法。我决定 运行 通过条件 if else 语句的循环,而不是使用嵌套循环。
<div class="row">
<? foreach($page->events_tickets as $cols): ?>
<? if($cols->event_num % 4 != 0) {?>
<!-- portfolio item -->
<div class="span3 project-item graphics box">
<div class="thumbnail" >
<!-- IMAGE CONTAINER-->
<a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
<img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" />
</a>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="caption">
<h4 class=""><?=$cols->event_title;?></h4>
<p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
<?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a>
</p>
</div><!--END CAPTION -->
</div><!-- END: THUMBNAIL -->
</div><!-- END: portfolio item -->
<? } else if($cols->event_num%4 == 0) {?>
<div class="row">
<div class="span3 project-item graphics box">
<div class="thumbnail" >
<!-- IMAGE CONTAINER-->
<a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
<img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" />
</a>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="caption">
<h4 class=""><?=$cols->event_title;?></h4>
<p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
<?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a>
</p>
</div><!--END CAPTION -->
</div><!-- END: THUMBNAIL -->
</div><!-- END: portfolio item -->
</div> <!--END OF ROW-->
<? } ?>
<? endforeach; ?>
</div> <!--END OF ROW-->
我在 events_tickets
字段中添加了额外的字段并将其命名为 events_num
。 events_num
从 1 开始,一直到记录结束。<? if($cols->event_num % 4 != 0) {?>
然后显示 4 列。然后如果数字达到 5 除以 4 的余数是奇数,因此它创建 <div class="row">
并显示另外 4 列。然后这个过程继续。因此不需要创建嵌套循环。