Adding different class to first div in loop

问题:

I have the following code:

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

<div class="item">
  <?php the_post_thumbnail('full');?>
  <div class="container">
    <div class="carousel-caption">
      <h1>
        <?php the_title(); ?>
      </h1>
      <p>
        <?php the_excerpt(); ?>
      </p>
    </div>
  </div>
</div>
<?php endwhile; ?>

And I need to add the class "active" to the first div (next to "item")

回答1:

Use a boolean variable to test, set it to true after first pass so that further loops will not mark it active

<?php $firstMarked = false; ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="item <?php echo !$firstMarked ? "active":"";?>">
  <?php the_post_thumbnail('full');?>
  <div class="container">
    <div class="carousel-caption">
      <h1>
        <?php the_title(); ?>
      </h1>
      <p>
        <?php the_excerpt(); ?>
      </p>
    </div>
  </div>
</div>
<?php $firstMarked = true;?>
<?php endwhile; ?>

回答2:

Add a flag:

<?php 
    $isFrist = true;
    while ( $loop->have_posts() ) : $loop->the_post();
?>

<div class="item">
  <?php the_post_thumbnail('full');?>
  <div class="container<?php if ($isFirst): ?> active<?php endif ?>">
    <div class="carousel-caption">
      <h1>
        <?php the_title(); ?>
      </h1>
      <p>
        <?php the_excerpt(); ?>
      </p>
    </div>
  </div>
</div>
<?php
    $isFrist = false;
    endwhile;
?>

回答3:

if($loop->current_post == 1){
  echo 'class';
}

回答4:

<script type="text/javascript">
$('.carousel-inner > :first-child').addClass("active");
</script>