Jquery: eq () не работает для меня

Question

Вот что я пытаюсь сделать:

$(document).ready(function(){
    $('ul li:eq(3n+1)').css({backgroundColor:'#f00'});
});

HTML

<ul>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
</ul>

http://jsfiddle.net/mD6Hf/2/

Answer 1

Поскольку вы, кажется, перепутали селектор jQuery eq() с псевдо-селектором CSS ':nth-child().

Чтобы использовать для этого селектор CSS (хотя и в контексте jQuery):

$(document).ready(function(){
    $('ul li:nth-child(3n+1)').css({backgroundColor:'#f00'});
});

JS Fiddle demo

Используя filter(), вы можете использовать:

$('li').filter(
    function(i){
        if (i%3 + 1 == 1){
            return $(this);
        }
}).css('background-color','#f00');

Демонстрация JS Fiddle .

Но я не вижу, как это сделать с eq(), поскольку, насколько я понимаю, это означает, что нужно возвращать только один результат (хотя я не исчерпывающе прочитал весь jQuery API).

Ссылки:

• :nth-child selector().
• filter().

Answer 2

Вот одно решение, которое использует немного больше jQuery для выполнения работы:

$(document).ready(function(){
    $('ul li').each(function(i,el) {
        if (i%3==0)
        $(this).css({backgroundColor:'#f00'});
    })
});

http://jsfiddle.net/mD6Hf/6/

Это будет работать, даже если браузер не поддерживает CSS3.

Answer 3

Или, если вы хотите использовать: eq (), попробуйте это так:

$('ul li:eq(3)').css({backgroundColor:'#f00'});

: eq () основано на 0. Означает, что индекс 3 является четвертым элементом.