Question

我想用jquery重复添加3个颜色的CSS类到一个长列表标签。我想知道如何实现这一点。还在搞清楚......

在：

<div class="mylist">
  <div class="item"><a href="#">record 1</a></div>
  <div class="item"><a href="#">record 2</a></div>
  <div class="item"><a href="#">record 3</a></div>
  <div class="item"><a href="#">record 4</a></div>
  <div class="item"><a href="#">record 5</a></div>
  <div class="item"><a href="#">record 6</a></div>
  <div class="item"><a href="#">record 7</a></div>
  <div class="item"><a href="#">record 8</a></div>
</div>

输出：

<div class="mylist">
  <div class="item"><a href="#" class="color1">record 1</a></div>
  <div class="item"><a href="#" class="color2">record 2</a></div>
  <div class="item"><a href="#" class="color3">record 3</a></div>
  <div class="item"><a href="#" class="color1">record 4</a></div>
  <div class="item"><a href="#" class="color2">record 5</a></div>
  <div class="item"><a href="#" class="color3">record 6</a></div>
  <div class="item"><a href="#" class="color1">record 7</a></div>
  <div class="item"><a href="#" class="color2">record 8</a></div>
</div>

Answer 1

为什么在使用CSS和:nth-child进行此操作时需要jQuery？

.item:nth-child(3n+1) {
    background-color:red;
}
.item:nth-child(3n+2) {
    background-color:green;
}
.item:nth-child(3n+3) {
    background-color:blue;
}

<div class="mylist">
  <div class="item"><a href="#">record 1</a></div>
  <div class="item"><a href="#">record 2</a></div>
  <div class="item"><a href="#">record 3</a></div>
  <div class="item"><a href="#">record 4</a></div>
  <div class="item"><a href="#">record 5</a></div>
  <div class="item"><a href="#">record 6</a></div>
  <div class="item"><a href="#">record 7</a></div>
  <div class="item"><a href="#">record 8</a></div>
</div>

Answer 2

试试这个： -

var i=1;
$('div.item a').each(function(){
    $(this).attr('class','color'+i)
    if(i==3){
      i=0; 
    }
    i++;
});

Working Demo

Answer 3

你可以试试这个，

var tempVar = 1;
$('.mylist.item').each(function(){
   if( tempVar > 3 )
      tempVar = 1;
   $( this ).find( "a" ).addClass( "color"+tempVar );
   tempVar++;
});

Answer 4

使用jquery，

尝试此操作

$('div.item a').each(function(index){
    $(this).addClass('color'+(index%3+1));
});

    $('div.item a').each(function(index){
        $(this).addClass('color'+(index%3+1));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mylist">
  <div class="item"><a href="#">record 1</a></div>
  <div class="item"><a href="#">record 2</a></div>
  <div class="item"><a href="#">record 3</a></div>
  <div class="item"><a href="#">record 4</a></div>
  <div class="item"><a href="#">record 5</a></div>
  <div class="item"><a href="#">record 6</a></div>
  <div class="item"><a href="#">record 7</a></div>
  <div class="item"><a href="#">record 8</a></div>
</div>

如何使用jquery在固定范围内添加类

4 个答案: