Question

我有一个数组

var arr = [2,5,8,11,14,17,....];

使用此数组我们必须为li元素应用css背景

HTML：

      <ul>
     <li>testing</li>
     <li>testing</li> // -->2nd li be green 
     <li>testing</li>
     <li>testing</li>
     <li>testing</li> // -->5th li be green
     <li>testing</li>
     <li>testing</li>
     <li>testing</li> // -->8th li green like this
     <li>testing</li>
     <li>testing</li>
     <li>testing</li>
     <li>testing</li>
     <li>testing</li> 
    <li>testing</li>
</ul>

我试过

ul li:nth-child(2n + 2){

       color: green;
  }

任何帮助???

Answer 1

没有javascript

＆＃13;

li:nth-child(3n + 2) {
  color: green;
}

＆＃13;

<ul>
  <li>testing</li>
  <li>testing</li>
  <!-- 2nd li be green -->
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <!-- 5th li be green -->
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <!-- 8th li be green -->
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
</ul>

＆＃13;

Answer 2

使用JavaScript可以做到这一点。

var arr = [2, 5, 8, 11, 14, 17];
var li = document.getElementsByTagName('li');

for (i = 0; i < li.length; i++) {
  li[i].style.color = arr.indexOf(i + 1) > -1 ? 'green' : 'black';
}

<ul>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
</ul>

或单独使用CSS。

li:nth-child(3n - 1) {
  color: green;
}

<ul>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
  <li>testing</li>
</ul>

Answer 3

您可以使用Array.forEach和$.eq

arr.forEach(function(num){
   $('ul li').eq(num - 1).css('backgroundColor', 'green');
});

DEMO

您也可以使用此代替eq

 $('ul li:nth-child('+ num + ')').css('backgroundColor', 'green');

同样@Phylogenesis说，你可以使用

li:nth-child(3n+2) {
   background: green;
}

Answer 4

li:nth-child(2) {
    background: #ff0000;
}


li:nth-child(3n+2) {
    background: #ff0000;
}

使用公式（an + b）。说明：a表示周期大小，n是计数器（从0开始），b是偏移值。

在这里，我们为索引为3的倍数的所有li元素指定背景颜色：

通过CSS颜色第n个元素

4 个答案: