jQuery eq(）选择器不工作

jQuery eq() selector not working

本文关键字：工作 选择器 eq jQuery      更新时间：2023-09-26

我已经尝试了所有可能的组合，但仍然不起作用。我正试着选择第一、第二、第三。。。图像并更改CSS属性。

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;
}

我希望有人能帮助我。

更新1

谢谢你所有的答案，但没有一个有效。我在文档上调用函数ready，它肯定会被调用（用alert();测试）。我还预设了所有图像的样式，所以除了第一个之外，它们都被隐藏了。

更新2

抱歉，伙计们，少了一个分号。谢谢你的帮助！

#slider和:eq(0)之间需要一个空格。

如果没有空间，它将寻找一个元素#slider，是第一个，而不是#slider的第一个子体。

但是，请注意，:eq是选择器的jQuery扩展。为了获得更好的性能，您应该使用$('#slider img').eq(n)，允许尽快解析整个（有效的）CSS选择器，然后使用.eq来获得所需的元素。

或者，使用本机CSS :nth-child()语法，即#slider :nth-child(1)，但请注意，这使用从1开始的数字，而不是0。

此外，给定的filter(img)语法不正确。它应该被链接（即.filter），并且参数应该是一个有效的选择器，即'img'（带引号）。然而，如果你的真实HTML如图所示，你不需要过滤器，因为它是一个NoOp——之前的函数调用只能返回图像。

好的，你可以用CSS来完成。据我所知，你想显示第一个图像，而隐藏其他图像？因此添加：

#slider_img5{
  visibility : visible;
  display : block;
}

或

#sider img:first-child{
  /* same... */
}

visibility属性在这里是不必要的，因为您已经用display: none隐藏了元素。。。

这应该有效：

$('#slider img').eq(0).hide();

一旦已经设置了display: none，就真的不需要设置visibility: hidden。但.hide()或多或少就是这样做的。

应该使用.find而不是.filter。

.find('img').css("display","none");
相关文章：