Question

此代码返回一个数组，然后使用foreach循环输出每个项目。我想在运行的每个foreach循环中向第一个.item类添加一个名为'active'的类。

我在底部包含的jQuery确实添加了一类活动，但仅限于页面上的第一个.item实例。我希望它在循环的每次传递中添加到第一个.item。

我正在尝试动态创建一个bootstrap轮播

   <div id="carousel-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner">

         <?php 
         $screenshots = get_post_meta(get_the_ID(), 'screenshots', false);

         foreach ( $screenshots as $screenshot ) { ?>

            <!-- Slide items -->
            <div class="item">
               <img src="<?php echo $screenshot; ?>">
            </div>

         <?php }?>

      </div>

   </div>




<script>
jQuery(document).ready(function() {
   jQuery( '.carousel-inner .item:first' ).addClass( 'active' );
});
</script>

Answer 1

有很多方法可以做到这一点，其中一个使用find()

jQuery( '.carousel-inner').find('.item:first' ).addClass( 'active' );

将在carousel-inner的每个实例中查看第一项

Answer 2

我对你的问题有点分歧，但是让我看看我是否正确......我已经理解了两件不同的事情，我将为两者提出解决方案：

也许您希望在客户端的每一行上突出显示第一行：

如果是，你可以这样做：

// Example on every 3rd it founds
jQuery( '.carousel-inner .item:nth-child(n/3)' ).addClass( 'active' );

或也许你想在服务器上这样做（我更喜欢！）：

<?php foreach ( $screenshots as $i => $screenshot ) { ?>

    <!-- Slide items -->
    <div class="item <?= is_int( $i / 3 ) && 'active' || '' ?>">
       <img src="<?= $screenshot; ?>">
    </div>

<?php } ?>

如果您有任何进一步的问题，请打我。：）

使用jQuery将类添加到每个foreach循环内的第一个项目

2 个答案: