JQuery eq () selector not working
I've tried every possible combination I could find, but it still doesn't work. I am trying to select the first, second, third ... images and change the CSS properties.
JavaScript:
$("#slider:eq(0)")filter(img).css("display","none");
$("#slider:eq(0)")filter(img).css("visibility","hidden");
HTML:
<div id = "slider">
<img id = "slider_img5" class = "slider_image" src = "img/slider_image_5.png" width = "1000px" height = "400px" alt = "slider_image_5">
<img id = "slider_img4" class = "slider_image" src = "img/slider_image_4.png" width = "1000px" height = "400px" alt = "slider_image_4">
<img id = "slider_img3" class = "slider_image" src = "img/slider_image_3.png" width = "1000px" height = "400px" alt = "slider_image_3">
<img id = "slider_img2" class = "slider_image" src = "img/slider_image_2.png" width = "1000px" height = "400px" alt = "slider_image_2">
<img id = "slider_img1" class = "slider_image" src = "img/slider_image_1.png" width = "1000px" height = "400px" alt = "slider_image_1">
</div>
CSS:
#slider{
position : absolute;
height : 400px;
width : 100%;
border-radius : 3px;
-moz-border-radius : 3px;
box-shadow : 1px 1px 5px #bbbbbb;
-moz-box-shadow : 1px 1px 5px #bbbbbb;
}
.slider_image{
position : absolute;
top : 0px;
left : 0px;
border-radius : 3px;
-moz-border-radius : 3px;
}
#slider_img1 , #slider_img2 , #slider_img3 , #slider_img4{
visibility : hidden;
display : none;
}
Hope someone can help me.
UPDATE 1
Thanks for all the answers, but none of them work. I call the function on the document ready, and it is definitely called (verified with alert();
). I also style all images to be hidden except the first.
UPDATE 2
Sorry guys, the semicolon is missing. Thank you for your help!
source to share
You need a space between #slider
and :eq(0)
.
Without the space, it looks for an element #slider
that is the first, not the first child #slider
.
Note that there :eq
is a jQuery extension for selectors. For best performance, you should use $('#slider img').eq(n)
to have the entire (valid) CSS selector parsed as quickly as possible and then using .eq
to get the element you want.
Alternatively use native CSS instead :nth-child()
, i.e. #slider :nth-child(1)
but note that this uses numbers starting with 1 instead of 0.
Also, your syntax filter(img)
as stated is not correct. It must be encoded (i.e. .filter
) and the parameter must be a valid selector, i.e. 'img'
(with quotes). However, if your real HTML is shown as shown, you don't need a filter because it is NoOp - the previous function call can only return images.
source to share
Ok, you can do it with CSS. As I understand it, you want to display the first image and hide the others? So add:
#slider_img5{
visibility : visible;
display : block;
}
or
#sider img:first-child{
/* same... */
}
The property visibility
is not needed here because you are already hiding the element with display: none
...
source to share