Mostafa Esmat Mostafa Esmat - 3 months ago 5
PHP Question

How can I iterate through 2 divs in the same time?

I am trying to iterate through 2 divs at the same time to echo out data from the database. Each div has it's own style and I want to keep iterating without duplicate each div twice, without losing my divs style. Even when I delete any post from my database, I don't want to lose div design Arrangement (odd/even display), any help or advice?

// class getAll to get all posts from db tables

class getALL {
private $pdo;

public function __construct() {
$this->pdo = db::getInstance();
}

public function get() {
$sql = "SELECT * FROM `posts`";
$q = $this->pdo->prepare($sql);
$q->execute();
if($q->rowCount()) {
return $q->fetchAll(PDO::FETCH_OBJ);
}
return false;
}
}


here the part of the 2 divs

// the 2 divs with iteration

<? if(is_array($getArticles) || is_object($getArticles)): ?>
<? foreach($getArticles as $getArticle): ?>
<? if($getArticle->id % 2 == 0) { ?> //odd/even logic
<!-- One -->
<article id="one" class="post style1">
<div class="image">
<img src="<?='images/'.$getArticle->image_name?>" alt="" data-position="75% center" />
</div>
<div class="content">
<div class="inner">
<header>
<h2><a href="post.html"><?=$getArticle->title?></a></h2>
<p class="info"><?=$getArticle->post_time?> by <a href="#"><?=$getArticle->username?></a></p>
</header>
<p><?=$getArticle->post?></p>
<ul class="actions">
<li><a href="post.php" class="button alt">Read More</a></li>
</ul>
</div>
</div>
</article>

<? }else{ ?>

<!-- two -->
<article id="four" class="post invert style2 alt">
<div class="image">
<img src="<?='images/'.$getArticle->image_name?>" alt="" data-position="60% center" />
</div>
<div class="content">
<div class="inner">
<header>
<h2><a href="post.php"><?=$getArticle->title?></a></h2>
<p class="info"><?=$getArticle->post_time?> by <a href="#"><?=$getArticle->username?></a></p>
</header>
<p><?=$getArticle->post?></p>
<ul class="actions">
<li><a href="post.php" class="button alt">Read More</a></li>
</ul>
</div>
</div>
</article>

<? } ?>
<? endforeach; ?>
<? endif; ?>

Answer

Instead of $getArticle->id, use a simple $counter variable to combine two divs together and to implement odd-even logic. That way, when you delete a post, it won't destroy the div arrangement. Here's the solution:

<?php $counter = 0; ?>
<?php if(is_array($getArticles) || is_object($getArticles)): ?>
<?php foreach($getArticles as $getArticle): ?>

<article id=<?php if($counter % 2 == 0){ echo "one"; }else{ echo "four"; } ?> class="post<?php if($counter % 2 == 0){ echo " style1"; }else{ echo " invert style2 alt"; } ?>">
    <div class="image">
        <img src="<?='images/'.$getArticle->image_name?>" alt="" data-position="<?php if($counter % 2 == 0){ echo "75%"; }else{ echo "60%"; } ?> center" />
    </div>
    <div class="content">
        <div class="inner">
            <header>
                <h2><a href="post.php"><?=$getArticle->title?></a></h2>
                <p class="info"><?=$getArticle->post_time?> by <a href="#"><?=$getArticle->username?></a></p>
            </header>
            <p><?=$getArticle->post?></p>
            <ul class="actions">
                <li><a href="post.php" class="button alt">Read More</a></li>
            </ul>
        </div>
    </div>
</article>

<?php ++$counter; ?>
<?php endforeach; ?>
<?php endif; ?>