How to echo unique incremental id to div in foreach loop?

Question

so i'm trying to use 'foreach' to have each of the div generated to have an incremental id, eg box1 box2 box3 etc.

this in my php file

<div id="box">
    <aside class="meta">

    </aside>

    <section class="post-content">


    </section><!--/.post-content -->

</article><!-- /.post -->

generates 4 of this:

<div id="box">
        <aside class="meta">
        </aside>

        <section class="post-content">            
        </section><!--/.post-content -->

</div>

how do i get (in a simplified form)

<div id="box1">
</div>

<div id="box2">
</div>

<div id="box3">
</div>

<div id="box4">
</div>

i've looked through an earlier question How to Assign a unique class to each item returned in a loop? but i can't make sense of it to work in my context.

UPDATE:

here's my unedited php code:

<div id="box" <?php post_class(); ?>>
    <aside class="meta">
        <a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>">
            <?php echo get_avatar( get_the_author_meta('email'), '128' ); ?>
        </a>
        <span class="month"><?php the_time( 'M' ); ?></span>
        <span class="day"><?php the_time( 'd' ); ?></span>
        <span class="year"><?php the_time( 'o' ); ?></span>
    </aside>

    <section class="post-content">
        <?php 
            if ( isset( $woo_options['woo_post_content'] ) && $woo_options['woo_post_content'] != 'content' ) { 
                woo_image( 'width=' . $settings['thumb_w'] . '&height=' . $settings['thumb_h'] . '&class=thumbnail ' . $settings['thumb_align'] ); 
            } 
        ?>

        <header>
            <h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
            <?php woo_post_meta(); ?>
        </header>

        <section class="entry">
        <?php if ( isset( $woo_options['woo_post_content'] ) && $woo_options['woo_post_content'] == 'content' ) { the_content( __( 'Continue Reading &rarr;', 'woothemes' ) ); } else { the_excerpt(); } ?>
        </section>


    </section><!--/.post-content -->

</div><!-- /.post -->

Answer 1

Assuming you are playing around with Wordpress, posts are being rendered within while loop.

Probably your post template is beign fetched by another file by using

get_template_part

#1 Use css

Use css to apply custom stylesheets. Apply custom class to your divs, like .customdiv, and then style them by using div.customdiv:nth-child(x). No further modifications needed.

#2 Move your single template into the main php file

You can copy your template part to main file and replace

get_template_part(..)

with its content. Not a good idea as you will have to do this in all of the main files that use this template. It will be harder to modify them in the future.

#3 Awful but working(?)

// might not work, as I haven't been using globals for ages. I strongly advise you against that method, it's FYI here

Just do the following in your main php file:

//before starting the while loop
$divId = 0;

And in your file with template at the same beginning:

global $divId;

Then, just replace following:

id="box"

with

id="box<?php echo ++$divId; ?>"

Answer 2

Try this using for loop

for ($i = 1; $i <= 4; $i++) {
    ?>

    <div id = "box<?php echo $i ?>"></div >

<?php
}

Answer 3

Maybe try (simplified):

<?php
$i = 0;
foreach ($data as $key => $value)
{
    $i++;
    echo '<div id="box' . $i . '">';
    // content
    echo '</div>';
}

Answer 4

<?php 
$counter = 1; 
foreach($results as $result){
?>
<div id="box<?php echo $counter; ?>">
</div>
<?php $counter++;
} ?>