jQuery eq() selector not working

Question

I've tried every possible combination that I could find but it still doesn't work. I'm trying to select the first, second, third... images and change the CSS properties. The JavaScript: ``` $("#slider:eq(0)")filter(img).css("display","none"); $("#slider:eq(0)")filter(img).css("visibility","hidden"); ``` The HTML: ```

Accepted Answer

You need a space between `#slider` and `:eq(0)`.

Without the space, it's looking for an element `#slider` that is the first, instead of the first descendant of `#slider`.

Note however, that `:eq` is a jQuery extension to selectors. For better performance you should use `$('#slider img').eq(n)`, allowing the entire (valid) CSS selector to be parsed as quickly as possible, and then using `.eq` to get the element you want.

Alternatively, use the native CSS `:nth-child()` syntax instead, i.e. `#slider :nth-child(1)`, but note that this uses numbers starting from 1 instead of 0.

Also, your `filter(img)` syntax as given is incorrect. It should be chained (i.e. `.filter`) and the parameter should be a valid selector, i.e. `'img'` (with the quotes). However if your real HTML is as shown you don't need the filter because it's a NoOp - the previous function call can only return images.

jQuery eq() selector not working

Solution

Problem