Question

我有这个清单，

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

我想动态地为它添加一个类，并且会产生类似的结果，

<ul id="list">
  <li class="class-1">Item 1</li>
  <li class="class-2">Item 2</li>
  <li class="class-3">Item 3</li>
  <li class="class-4">Item 4</li>
  <li class="class-1">Item 5</li>
  <li class="class-2">Item 6</li>
</ul>

这是我的初始代码，

jQuery(function(){
  var list = jQuery('#list').children('li');
  var arr = ['class-1','class-2','class-3','class-4'];
  jQuery.each(arr, function(index, el) {
    list.addClass(el);
  });
});

但它所做的就是在每个列表项上添加所有类。我想我真的不知道我在这里做什么。如果有人能指出我正确的方向，我真的很感激。

Answer 1

您可以使用each，

来完成此操作

$('#list > li').each(function(i, elm) {
    $(this).addClass("class-" + ((i % 4) + 1));
});

How nth-child Works

Answer 2

您可以将 :nth-child() 伪选择器与基于数组长度和索引的公式以及 jQuery.each() 或 {{3数据迭代器。数组迭代器

<小时/>

jQuery(function() {
  var arr = ['class-1', 'class-2', 'class-3', 'class-4'],
    len = arr.length;
  jQuery.each(arr, function(i, v) {
    $('#list li:nth-child(' + len + 'n+' + (i + 1) + ')').addClass(v);
  })
})

.class-1 {
  color: red
}
.class-2 {
  color: green
}
.class-3 {
  color: blue
}
.class-4 {
  color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

仅供参考： forEach()

Answer 3

请迭代列表而不是数组... 您可以尝试此代码

jQuery(function(){
  var list = jQuery('#list').children('li');
  var arr = ['class-1','class-2','class-3','class-4'];

  list.each(function(index, el) {
      $(el).addClass(arr[index % arr.length]);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

Answer 4

您正在迭代列表而不是数组。

也许你可以考虑这个：

jQuery(function(){
  var list = jQuery('#list').children('li');

  jQuery.each(list, function(index, el) {
    $(this).addClass('class-' + (index % 4));
  });

});

Answer 5

Demo

  var list = jQuery('#list').children('li');
  var arr = ['class-1', 'class-2', 'class-3', 'class-4'];

  $('#list li').each(function(index, el) {
  console.log(index)
    $(this).addClass(arr[index % 4])
  });

您可以遍历列表并使用索引并获取%4

＆＃13;

  var list = jQuery('#list').children('li');
  var arr = ['class-1', 'class-2', 'class-3', 'class-4'];

  $('#list li').each(function(index, el) {
    console.log(index)
    $(this).addClass(arr[index % 4])
  });

＆＃13;

.class-1 {
  color: red
}
.class-2 {
  color: black
}
.class-3 {
  color: yellow
}
.class-4 {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

＆＃13;

Answer 6

在回顾了我带来的每个人的答案之后。

jQuery(function(){
    var list = jQuery('#list').children('li');

    var arr = [
        'class-1',
        'class-2',
        'class-3',
        'class-4'
    ];


    list.each(function(index, el) {
        jQuery(this).addClass(arr[index % arr.length]);
    });
});

谢谢大家的帮助。

Answer 7

您可以将.addClass与通过索引的函数一起使用：

jQuery(function($) {
  var classes = ['class-1','class-2','class-3','class-4'];
  $('#list > li').addClass(function(index) {
    return classes[index % classes.length];
  });
});

.class-1 { color: red }
.class-2 { color: blue }
.class-3 { color: green }
.class-4 { color: yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

如何在jQuery中迭代一个唯一的类？

7 个答案:

How nth-child Works