添加CSS樣式到每3個元素

我有HTML這樣的：添加CSS樣式到每3個元素

<div id="content"> 
    <div class="view-row view-row-1"> 
    <div class="view-row view-row-2"> 
    <div class="view-row view-row-3"> 
    <div class="view-row view-row-4"> 
    <div class="view-row view-row-5"> 
    <div class="view-row view-row-6"> 
</div>

我需要一個CSS樣式添加到行 - 2, 5, 8, 11, 14等。例如，可能會有很多元素，例如40。

$('.content .view-row').each(function(i) { 
    if ($(this).hasClass('view-row-2')) { 
     $(this).css('padding-left', '7px'); 
    } 
    else if($(this).hasClass(?)) { 
    } 
});

實現此目的的最佳方法是什麼？

來源

2012-11-23 Peter Popelyshko

使用此 - http://api.jquery.com/nth-child-selector/ –

謝謝大家 –

確保接受答案的一個 –

你想使用nth-child這樣的選擇器：

$("#content .view-row:nth-child(3n-1)").addClass("highlight");

Example fiddle

然後，您可以將所需樣式放在CSS類中，以保持良好的問題分離。

來源

2012-11-23 13:25:08

ty，很好的解決方案 – sergionni

如果jquery不是必需的，你可以在css => http://jsfiddle.net/DwHFb/ – anderssonola

上進行，也就是我用css做的），不過無論如何它對於jquery解決方案知道的有用 –

var num = 2; 
$('.content .view-row').each(function(i) { 
      if ($(this).hasClass('view-row-'+num)) { 
       num = num + 3; 
       $(this).css('padding-left', '7px'); 
      } 
      else if($(this).hasClass(?)) { 

      } 
      });

來源

2012-11-23 13:22:49 Jean

You'v循環迭代了，所以你可以這樣做：

$('.content .view-row').each(function(i) { 
    if ((i + 2) % 3 == 0) { $(this).css('padding-left', '7px'); } 
});

或使用CSS3選擇第n型 - ：

$('.content .view-row:nth-of-type(3n-1)').css('padding-left', '7px');

來源

2012-11-23 13:24:02

選項2看起來更清潔。 – michaelward82

我認爲他使用drupal。 Drupal使用舊版本的jquery，我不確定css3選擇器是否可以使用它。 –

您不需要'each（）'迭代器和'nnth'選擇器，因爲jQuery會自動將指定的'css'應用於集合中的所有元素。 –

不要在它複雜化 -

$('#content div:nth-child(3n-1)').addClass('foo');

來源

2012-11-23 13:25:57

添加CSS樣式到每3個元素

回答

相關問題