Question

我有一些关于jQuery的eq（）属性以及如何多次选择的问题。

实施例：我有一个包含15个项目的列表。我希望每个第1，第6和第11项具有背景颜色。第2，第7和第12具有另一种背景颜色，第3，第8和第13具有背景颜色等，等等。

我虽然使用了eq（）属性但是如果我的列表需要增长，我不想在每次有人添加新列表项时在jQuery中手动添加背景颜色。

如果我的列表需要增长，那么下一个颜色将与其后面的颜色重合。因此，第16个列表项将需要与第1个相同的背景。

这有意义吗？

我将如何在jQuery中实现这一目标。一个循环？我该怎么做

提前致谢。

Answer 1

使用.each()，它还可以访问元素索引。您可以对索引执行模数以确定应用哪些行规则。

Answer 2

如果可以纯粹使用css。最重要的是，css也适用于动态添加的元素。

:nth-child( { number expression | odd | even } ) {
   declaration block
}

指定适当的表达式以选择2nd，3rd etc元素并添加所需的样式。它在所有现代浏览器中都受支持。

E.g。要选择选择第1，第6，第11 ......请使用此功能。

:nth-child(5n + 1) {
   ...
}

Answer 3

:nth-child选择器允许重复模式

http://api.jquery.com/nth-child-selector/

示例：

每第4项

 $('li:nth-child(4n)').addClass('blue');

Answer 4

尝试使用:nth-child代替eq（）。见下文，

DEMO

$(document).ready(function () {
  $('#myList li:nth-child(5n+1)').addClass('pink');
  $('#myList li:nth-child(5n+2)').addClass('blue');
  $('#myList li:nth-child(5n+3)').addClass('yellow');
});

Answer 5

通常，您应该使用CSS进行样式设置。但是，如果您没有使用CSS的任何选项，您可以尝试类似的东西：

$('ul#list li').css('background-color', function(idx) {
    switch (idx % 5) {
        case 0: return '#000';    
        case 1: return '#111';                
        case 2: return '#222';
        case 3: return '#333';
        case 4: return '#444';
        case 5: return '#555';
        default: return '#000'; 
    }
});

http://codepen.io/nok/pen/ZBXJeJ

jquery eq（）和循环

5 个答案: