jquery eq() и looping

Question

У меня есть несколько вопросов о свойстве eq() jQuery и порядке множественного выбора.

Пример: У меня есть список с 15 элементами. Я хочу, чтобы каждый 1-й, 6-й и 11-й предметы имел цвет фона. 2, 7 и 12 имеют другой цвет фона, 3-й, 8-й и 13-й цвет имеют цвет фона и т. Д. И т. Д. И т. Д.

Я, хотя об использовании свойства eq(), но если мой список должен расти, я не хотите вручную добавлять цвет фона в jQuery каждый раз, когда кто-то добавляет новый элемент списка.

Если мой список должен расти, то следующий цвет будет совпадать с тем, который стоит за ним. Таким образом, 16-й элемент списка будет иметь тот же фон, что и первый.

Это имеет смысл?

Как бы это сделать в jQuery. Петля? как бы я это сделал.

Заранее спасибо.

Answer 1

Попробуйте использовать :nth-child вместо уравнения(). Смотрите ниже,

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 2

Используйте .each(), что также дает вам доступ к индексу элемента. Вы можете сделать modulo по индексу, чтобы определить, какие правила строк применяются.

Answer 3

Если может быть чисто вниз, используя css. И самое главное, css будет работать и для динамически добавленных элементов.

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

Укажите соответствующее выражение, чтобы выбрать 2-й, 3-й и т. Д. Элементы и добавить необходимые стили. Он поддерживается во всех современных браузерах.

E.g. Для выбора 1, 6, 11-го ... используйте это.

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

Answer 4

Селектор :nth-child позволяет повторяющиеся модели

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

Пример:

Каждый 4-ый элемент

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

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