jquery .css() 不工作答案

【问题标题】：jquery .css() not workingjquery .css() 不工作
【发布时间】：2014-12-22 05:45:15
【问题描述】：

我不知道为什么当我使用 jQuery 的 .css() 函数时它会返回：

 Uncaught TypeError: undefined is not a function

我的代码是这样的：

HTML：

<div class="photo1 sliderPhoto">d</div>
<div class="photo2 sliderPhoto">d</div>
<div class="photo3 sliderPhoto">d</div>
<div class="photo4 sliderPhoto">d</div>

CSS：

.sliderPhoto{
    position: absolute;
    top: 0px;
    left: 0px;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.photo1{
    background-image: url('../photos/ph1.jpg');
    z-index: 6;
}
.photo2{
    background-image: url('../photos/ph2.jpg');
    z-index: 6; 
    display: none;
}
.photo3{
    background-image: url('../photos/ph3.jpg');
    z-index: 6;
    display: none;
}
.photo4{
    background-image: url('../photos/ph4.jpg');
    z-index: 6;
    display: none;
}

$(document).ready 上的 JQuery：

$photos = [$(".photo1")[0], $(".photo2")[0], $(".photo3")[0], $(".photo4")[0]];
$photos[0].css("z-index");

当我输入这个 jQuery 代码时它不起作用:( 但这个 $photos[0] 返回我需要的确切 div。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

$photos[0].css("z-index");

应该是：

$($photos[0]).css("z-index");

您必须将 DOM 元素转换回 jQuery 对象才能使用 jQuery 函数。

或者，使用 jQuery 简单地过滤元素可能更有效，因此不需要转换 -

$photos.first().css("z-index");

有关 .first() 方法的更多详细信息，请参阅http://api.jquery.com/first/

【讨论】：

这会从 jQuery 对象中获取第一个 DOM 元素，然后将其转换回 jQuery 对象。使用 jQuery .first() 方法 (api.jquery.com/first) 是否没有意义，这样您仍然可以在结果上使用 .css() 方法，而不是获取 DOM 元素并将其转换回全新的 jQuery对象。
@pwdst 是的，这是一个更好的方法。
@GauravKalyan 我冒昧地编辑了您的答案以添加替代方法，同时保留您的原始答案
@pwdst 我也打算这样做。谢谢你。我只是想指出 OP 将 jQuery 函数应用于 DOM 元素的 OP 错误。
@GauravKalyan 你的答案在这方面是正确的——而且仍然值得被接受。我只是想用 jQuery 方法来扩展它，作为 OP 最初使用的过滤方法的替代方法。

【解决方案2】：

您尝试访问 DOM 对象而不是 jQuery 实例上的 css() 方法。

表达式$element[0]指的是真正的DOM节点。

您应该将创建 $photos 数组的表达式更改为：

$photos = [$(".photo1"), $(".photo2"), $(".photo3"), $(".photo4")];

（以及调整其他代码引用）或使用$()重新包装每个 DOM 节点

$($photos[0]).css("z-index");

注意：您还可以通过 .sliderPhoto 选择器找到元素，在您的示例中获得一个包含四个项目的 jQuery 集合。然后，您可以使用 eq() docs 访问各个节点，甚至可以使用 each() docs 进行迭代

$(".sliderPhoto").eq(0) // first element

【讨论】：

【解决方案3】：

要获取对象集合的第一个元素，您应该使用伪选择器：eq

$photos = [$(".photo1:eq(0)"), $(".photo2:eq(0)"),$(".photo3:eq(0)"), $(".photo4:eq(0)")];

但如果您只有一个 photo1 实例，您可以考虑使用 id 代替类，或者在所有类中应用您的规则。

【讨论】：

【解决方案4】：

由于你的类选择器只会返回 1 个元素，你应该这样做。

$photos = [$(".photo1"), $(".photo2"), $(".photo3"), $(".photo4")];

http://jsfiddle.net/62x9mdj6/

【讨论】：

【解决方案5】：

那是因为$(".photo1")[0] 返回一个 DOM 节点，它不能被 jQuery 方法操作，因为它们使用 jQuery 对象。相反，尝试：

$photos = [$(".photo1"), $(".photo2"), $(".photo3"), $(".photo4")];
$photos[0].css("z-index");

如果您不想即时缓存 .photo(n) 元素，只需使用类数组即可：

photos = [".photo1", ".photo2", ".photo3", ".photo4"];
$(photos[0]).css("z-index");

请注意，我更喜欢将$ 用于 jQuery 对象，而不是用于非 jQuery 对象（即第二个示例）。

【讨论】：

【解决方案6】：

这行得通。删除数组中的索引。反正你不需要它们。因为你每个班级都不超过一个。

$(document).ready(function() {

$photos = [$(".photo1"), $(".photo2"), $(".photo3"), $(".photo4")];
alert($photos[0].css('z-index'));

});

工作小提琴：http://jsfiddle.net/n8pqj2wg/

【讨论】：