Looping through 3 recent posts but separating them into separate divs

Question

I am trying to loop through 3 posts, but separating each one into it's own div as some jQuery will show and hide one at a time.

I've created the code to show one, but separating them I am unsure of.

<div id="news-container-1">
    <?php
    // Create a variable to hold our custom Loop results
    $excludes  = array('4135');
    $frontpageposts = get_posts( array( 
         'numberposts' => 1, // only the 3 latest posts
         'post__not_in' => $excludes
    ) );

    // Create output only if we have results
    // Customize to suit your HTML markup
    if ( $frontpageposts ) { 

         foreach ( $frontpageposts as $fppost ) { 
              // setup postdata, so we can use template tags
              setup_postdata($fppost);
              ?>

              <div <?php post_class(); ?>>
                   <h4><a href="<?php the_permalink(); ?>"><?php //the_title(); ?>Latest News #1</a></h4>
                   <div class="post-entry">
                        <?php                                                
                                $content = $post->post_content;
                                $searchimages = '~<img [^>]* />~';

                                /*Run preg_match_all to grab all the images and save the results in $pics*/

                                preg_match_all( $searchimages, $content, $pics );

                                // Check to see if we have at least 1 image
                                $iNumberOfPics = count($pics[0]);

                                if ( $iNumberOfPics > 0 ) { ?>
                                    <!-- GRAB THE IMAGE AND USE WHATEVER HTML YOU LIKE -->
                                      <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /></a>
                                <?php }
                        ?>
                        <?php //the_excerpt(); ?>
                   </div>
              </div>

    <?php }
    } 
    ?>
</div>

I've changed the 'numberposts' to one in this instance as showing 3 here will display all 3 within the first news-container-1 div.

The other two divs are:

<div id="news-container-2"></div>
<div id="news-container-3"></div>

Answer 1

This isn't really a WordPress question, but all you need to do is setup a counter for the class integer that you want, as follows:

    <?php
    // Create a variable to hold our custom Loop results
    $excludes  = array('4135');
    $frontpageposts = get_posts( array( 
         'numberposts' => 3, // only the 3 latest posts
         'post__not_in' => $excludes
    ) );

    // Create output only if we have results
    // Customize to suit your HTML markup
    if ( $frontpageposts ) { 

         $i = 1;

         foreach ( $frontpageposts as $fppost ) { 
              // setup postdata, so we can use template tags
              setup_postdata($fppost);
              ?>

             <div id="news-container-<?php echo $i++ ?>">

              <div <?php post_class(); ?>>
                   <h4><a href="<?php the_permalink(); ?>"><?php //the_title(); ?>Latest News #1</a></h4>
                   <div class="post-entry">
                        <?php                                                
                                $content = $post->post_content;
                                $searchimages = '~<img [^>]* />~';

                                /*Run preg_match_all to grab all the images and save the results in $pics*/

                                preg_match_all( $searchimages, $content, $pics );

                                // Check to see if we have at least 1 image
                                $iNumberOfPics = count($pics[0]);

                                if ( $iNumberOfPics > 0 ) { ?>
                                    <!-- GRAB THE IMAGE AND USE WHATEVER HTML YOU LIKE -->
                                      <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /></a>
                                <?php }
                        ?>
                        <?php //the_excerpt(); ?>
                   </div>
              </div>
    </div>


    <?php }
    } 
    ?>