Jump to content

pulling posts from database and wrapping every 3 posts in a container div


zachwaggoner

Recommended Posts

I need to create columns in my html with some comments that are being pulled from my database and posted via ajax.  This is what I need it to look like after the PHP does its thing.

 

<div class="container">

<div class="comment"></div>

<div class="comment"></div>

</div class="comment"></div>

</div>

 

right now it doesn't create the container causing me to have layout issues.

 

How would you have PHP wrap a container around every third div?

 

I'm very much a front end developer and can't seem to wrap my head around this one.

 

Thanks for the help!

post-165596-0-53698700-1380333400_thumb.jpg

Link to comment
Share on other sites

Something like this will work:

$posts = array();//This will be your result set from the database
$count = 0;
$postCount = count($posts);
echo '<div class="container">'; //Open a container
foreach($posts as $post){
  echo '<div class="comment">'.$post.'</div>';
  $count++;
  $postCount--;
  if($count == 3){ //Check if 3 posts have been printed
    echo "</div>"; //close your container div
    if($postCount > 0){ //Check if there are more posts
      echo '<div class="container">'; //open a new container    
    }
    $count = 0; //reset 3-post counter
  }
}

Denno

Edited by denno020
Link to comment
Share on other sites

@Denno - If the posts array does not equal a number that is divisible by 3, then your code will not close the final div.

 

Try this instead.

 

<?PHP

  //### How many per row
  $perRow = 3;
 
  //### Keep count of posts per row
  $perRowCount = 0;
 
  //### Start output
  $output = '';
 
  //### Dummy data, replace with your own
  $posts = array('1', '2', '3', '4', '5', '6', '7', '8', '9', '10');
 
  //### Iterate over each post
  foreach($posts AS $post){
    //### If there is no remainer from division, open container
    if($perRowCount%$perRow == 0) {
      $output .= '<div class="container">Container Start'.PHP_EOL;
    }
    
    //### Add the comment element with data
    $output .= '<div class="comment">'. $post .'</div>'.PHP_EOL;

    //### IF the remainer from the division is 2, close the container ready for opening another next time round
    if($perRowCount%$perRow == 2) {
      $output .= 'Container End</div>'.PHP_EOL;
    }
    
    //### Increase per row count
    $perRowCount++;
  }
 
  //### If the remainder from the division is not 0, then close the final open div
  if($perRowCount%$perRow != 0) {
    $output .= 'Container End</div>'.PHP_EOL;
  }

  //### Echo the output
  echo $output;
 
?>
Link to comment
Share on other sites

 

@Denno - If the posts array does not equal a number that is divisible by 3, then your code will not close the final div.

 

 

That's easily fixed by just adding an echo "</div>"; directly after the foreach, with another step of logic to make sure there aren't two ending divs

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.