Ive seen alot of solutions here on Stack but none seem to work for me, so im trying to write it based upon what im seeing others do.
Im able to count the columns and start the new row, but the problem is, since im doing this in a foreach (getting data from DB) it will now place each entry from DB 4 times->close the row; start a new row->and show the second entry from DB 4 times->close the row; start a new row->and shows the third entry from DB 4 times, and so on... (my code is on the bottom of this post)
So, right now this code displaying items like:
col-md3(item1) | col-md3(item1) | col-md3(item1) | col-md3(item1)
col-md3(item2) | col-md3(item2) | col-md3(item2) | col-md3(item2)
....
....
however, i want it to display like:
col-md3(item1) | col-md3(item2) | col-md3(item3) | col-md3(item4)
col-md3(item5) | col-md3(item6) | col-md3(item7) | col-md3(item8)
.... | ... | .... | ....
....
My code right now :
foreach($data as $row) {
echo '<div class="row">';
for ($i=0; $i<4;$i++){
if ($i%4 == 0 && $i != 0){
echo '</div><div class="row">';
}
echo '<div class="col-md-3">';
?>
<!-- Ecommerce UI #2 -->
<div class="ecom-ui ecom-ui-two">
<div class="img-container">
<!-- Product Image -->
<a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a>
</div>
<!-- product details -->
<div class="product-details">
<!-- product title -->
<h4><a href="#"><?php echo $row[name]; ?></a> <span class="color pull-right">€<?php echo $row[price]; ?></span></h4>
<div class="clearfix"></div>
<p>Lorem Ipsum is simply dummy text of printing the printing industry.</p>
<!-- Price -->
<div>
<span class="cart"><a href="#">Add to cart</a></span>
<!-- Media icon -->
<span class="p-media pull-right">
<a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a>
<a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a>
<a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- Ecommerce UI #2 -->
<?php
echo'</div>';
}
echo '</div><br />';
}
解決方案
There is logic error in printing code. You need only one loop, not nested.
Change your code as below:
<?php .....
....
$i=0;
echo '<div class="row">';
foreach($data as $row) {
echo '<div class="col-md-3">';
?>
<!-- Ecommerce UI #2 -->
<div class="ecom-ui ecom-ui-two">
<div class="img-container"><!-- Product Image -->
<a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a>
</div>
<!-- product details --><div class="product-details">
<!-- product title -->
<h4><a href="#"><?php echo $row[name]; ?></a><span class="color pull-right">€<?php echo $row[price]; ?></span></h4>
<div class="clearfix"></div>
<p>Lorem Ipsum is simply dummy text of printing the printing industry.</p>
<!-- Price --><div>
<span class="cart"><a href="#">Add to cart</a></span>
<!-- Media icon --><span class="p-media pull-right">
<a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a>
<a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a>
<a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- Ecommerce UI #2 -->
</div>
<?php
$i++;
if ($i%4 == 0) echo '</div><div class="row">';
} ?>
</div><br />
Logic: Need to loop through all(each) rows in $data, when loop executed 4 times then break the row(by </div>) and start the new (by <div class="row">). To handle that start the counter $i before loop with 0 and increment it by 1 after each loop. When $i is fully-dividable by 4 then echo "closing-row(div)-and-starting-row(div)-code", ie. </div><div class="row">
這篇關(guān)于php循環(huán)計(jì)數(shù)器引導(dǎo)行的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來(lái)源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問(wèn)題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請(qǐng)聯(lián)系我們刪除處理，感謝您的支持！
