如何在foreach循环中回显div的唯一增量id?

时间:2014-04-27 12:28:10

标签: php arrays loops foreach

所以我试图使用'foreach'让生成的每个div都有一个增量id,例如 box1 box2 box3等。

这在我的php文件中

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

    </aside>

    <section class="post-content">


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

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

生成4个:

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

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

</div>

我如何获得(以简化形式)

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

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

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

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

我已经查看了之前的问题How to Assign a unique class to each item returned in a loop?,但我无法理解它在我的背景下工作。

更新:

这是我未经编辑的PHP代码:

<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 -->

4 个答案:

答案 0 :(得分:1)

使用for循环

尝试此操作
for ($i = 1; $i <= 4; $i++) {
    ?>

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

<?php
}

答案 1 :(得分:1)

假设您正在玩Wordpress,帖子正在while loop.

中呈现

您的帖子模板可能是使用

获取的另一个文件
get_template_part

#1使用css

使用css应用自定义样式表。将自定义类应用于您的div,例如.customdiv,然后使用div.customdiv:nth-child(x)设置样式。无需进一步修改。

#2将您的单个模板移动到主php文件

您可以将模板部件复制到主文件中并替换

get_template_part(..)

及其内容。不是一个好主意,因为您必须在使用此模板的所有主文件中执行此操作。将来修改它们会更加困难。

#3糟糕但有效(?)

//可能不起作用,因为我已经多年没有使用全局变量了。我强烈建议你不要使用这种方法,这是我在这里的费用

在主php文件中执行以下操作:

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

在您的文件中,同一个开头的模板:

global $divId;

然后,只需替换以下内容:

id="box"

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

答案 2 :(得分:0)

也许尝试(简化):

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

答案 3 :(得分:0)

<div class="video-container">
    <video poster="http://code-love.me/video/posters/flamenco.jpg">
        <source src="http://code-love.me/video/videos/flamenco.mp4" type="video/mp4" />
        <source src="http://code-love.me/video/videos/flamenco.ogg" type="video/ogg" />
    </video>
    <div class="controls-wrapper">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <ul class="video-controls">
            <li><input type="button" name="play-pause" value="Play" class="play"></li>
            <li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
        </ul>
    </div>
</div>