Question

Here is what I’m trying to do:

$(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

Because you seem to have confused jQuery’s eq() selector with CSS’ :nth-child() pseudo-selector.

To use a CSS selector for this (albeit in the context of jQuery):

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

JS Fiddle demo

Using filter() you can use:

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

JS Fiddle demo.

But I can’t see how to do it with eq() since, so far as I can see, that’s meant to return only one result (though I’ve not exhaustively read the whole jQuery API).

References:

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