使用jQuery將類添加到每個foreach循環內的第一個項目

Question

此代碼返回一個數組，然後使用foreach循環來輸出每個項目。我想在每個運行的foreach循環中向第一個.item類添加一個名爲'active'的類。

包含在底部的jQuery確實會添加一個活動類，但只能添加到頁面上的.item的第一個實例。我希望將它添加到循環的每一個循環中的第一個.item。

我想動態創建一個引導旋轉木馬

<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

我某種劃分你的問題，但讓我看看，如果我得到正確的......我明白兩個不同的東西，我將提出解決方案兩種：

也許你想hightlight在客戶端上的每一行的第一個：

如果是的話，你可以做這樣的事情：

// 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 } ?> 

打我，如果您有任何進一步的問題。 :)