javascript jQuery eq() 选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14915989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery eq() selector not working
提问by a13ks
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.
我已经尝试了我能找到的所有可能的组合，但它仍然不起作用。我正在尝试选择第一个、第二个、第三个...图像并更改 CSS 属性。
The JavaScript:
JavaScript：
$("#slider:eq(0)")filter(img).css("display","none");
$("#slider:eq(0)")filter(img).css("visibility","hidden");
The HTML:
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>
The CSS:
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;
}
I hope someone can help me.
我希望有一个人可以帮助我。
UPDATE 1
更新 1
Thank you for all the answers but none of them work. I'm calling the function on document ready and it is definitely called (tested with alert();). I also preset the styles of all images so they are all hidden except for the first one.
感谢您提供所有答案，但没有一个有效。我在文档就绪时调用该函数，它肯定被调用（用 测试alert();）。我还预设了所有图像的样式，因此除了第一个之外，它们都被隐藏了。
UPDATE 2
更新 2
Sorry guys, there was a semicolon missing. Thank you for all the help!
对不起，伙计们，缺少一个分号。谢谢大家的帮助！
回答by Alnitak
You need a space between #sliderand :eq(0).
#slider和之间需要一个空格:eq(0)。
Without the space, it's looking for an element #sliderthat isthe first, instead of the first descendantof #slider.
如果没有空间，它是寻找一个元素#slider即是第一，而不是第一个后代的#slider。
Note however, that :eqis a jQuery extensionto 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 .eqto get the element you want.
但是请注意，这:eq是选择器的jQuery 扩展。为了获得更好的性能，您应该使用$('#slider img').eq(n)，允许尽可能快地解析整个（有效）CSS 选择器，然后使用它.eq来获取您想要的元素。
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.
或者，使用原生 CSS:nth-child()语法，即#slider :nth-child(1)，但请注意，这使用从 1 开始的数字而不是 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.
此外，您filter(img)给出的语法不正确。它应该是链接的（即.filter）并且参数应该是一个有效的选择器，即'img'（带引号）。但是，如果您的真实 HTML 如下所示，则不需要过滤器，因为它是 NoOp - 前面的函数调用只能返回图像。
回答by nice ass
Ok, you can do this with CSS. From what I understand, you want to display the first image, and hide the others? So add:
好的，你可以用 CSS 做到这一点。据我了解，您想显示第一个图像，并隐藏其他图像？所以添加：
#slider_img5{
visibility : visible;
display : block;
}
or
或者
#sider img:first-child{
/* same... */
}
The visibilityproperty is unnecessary here because you're already hiding the element with display: none...
visibility此处不需要该属性，因为您已经使用display: none...
回答by Blender
This should work:
这应该有效：
$('#slider img').eq(0).hide();
There's really no need to set visibility: hiddenonce display: noneis already set. But that's more or less what .hide()does.
visibility: hidden一旦display: none设置，真的没有必要设置。但这或多或少是.hide()这样做的。
回答by Priscilla Huff
Should be using .findinstead of .filter.
应该使用.find而不是.filter.
.find('img').css("display","none");
