Question

http://jsfiddle.net/9G6NM/

console.log($('.square').css('background-color')); // red
console.log($('.square')[1].css('background-color')); // error
console.log($('.square')[2].css('background-color')); // error

如何通过jquery检索绿色和蓝色方块的属性？

Answer 1

您应该使用eq：

console.log($('.square').css('background-color'));
console.log($('.square').eq(1).css('background-color'));
console.log($('.square').eq(2).css('background-color'));

问题是css是一个jQuery对象的方法。但是，如果您使用括号表示法来访问单个元素，那么您将获得真实的＆＃34;那些，没有任何jQuery包装。

或者，您可以：

再次在jQuery对象中包装它（价格昂贵，不推荐）：
```
$($('.square')[1])
```

使用vanilla-js获取样式：

$('.square')[1].style.backgroundColor; // Only to get inline styles
getComputedStyle($('.square')[1]).backgroundColor;

Answer 2

使用eq()：

console.log($('.square').eq(1).css('background-color'));

方括号从jQuery集合中检索DOM节点，而不是在该索引点处的jQuery对象。

参考文献：

eq()。

Answer 3

$($('.square')[1]).css('background-color')

.css需要一个jquery对象，[1]给你一个DOM对象，所以你必须使用$()将它转换为jquery对象（不确定这是否是正确的术语）

http://jsfiddle.net/9G6NM/2/

Answer 4

另一种选择似乎是：

http://jsfiddle.net/9G6NM/1/

console.log($($('.square')[0]).css('background-color')); // red
console.log($($('.square')[1]).css('background-color')); // green (dark)
console.log($($('.square')[2]).css('background-color')); // blue

通过索引检索某个元素

4 个答案: