Question

当我有这个HTML时：

<div id="map">
  <div class="elem">
    hey1
  </div>
   <div class="elem">
    hey2
  </div>
   <div class="elem">
    hey3
  </div>
</div>

JS：

var elems = $('#map .elem');
elems[1].css("color", "white");

这有些不对，但我不知道怎么做对了？

我没理解，因为这有效：

var map = $('#map');
map.css("background", "red");

这是一个小提琴： https://jsfiddle.net/y596ynsb/

Answer 1

函数css()是一个jQuery变量，它仅适用于jQuery对象。使用数组访问[]，它获得一个DOM元素，它没有jQuery函数css()。

所以你需要使用eq()，以便将第n个元素作为jQuery对象。

elems.eq(0).css("color", "white");

＆＃13;

var map = $('#map');
map.css("background", "red");
var elems = $('#map .elem');
elems.eq(0).css("color", "white");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
  <div class="elem">hey1</div>
  <div class="elem">hey2</div>
  <div class="elem">hey3</div>
</div>

＆＃13;

DEMO

Answer 2

您可以使用:nth-child()选择器执行此操作。更新了fiddle

＆＃13;

$(function() {
  var map = $('#map');
  map.css("background", "red");

  var elems = $('#map .elem:nth-child(1)');
  elems.css("color", "white");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
  <div class="elem">
    hey1
  </div>
  <div class="elem">
    hey2
  </div>
  <div class="elem">
    hey3
  </div>
</div>

＆＃13;

Answer 3

如果你所做的只是通过索引在特定元素上设置一些样式规则，那么根本不需要在JS中这样做。 CSS就是为此目的而设计的;特别是nth-child()选择器：

#map .elem:nth-child(1) {
  color: red; /* used red here as white would be invisible in SO :) */
}

<div id="map">
  <div class="elem">
    hey1
  </div>
  <div class="elem">
    hey2
  </div>
  <div class="elem">
    hey3
  </div>
</div>

如果您必须在JS中执行此操作，因为某些业务逻辑决定应突出显示哪个元素，那么您应该使用eq()方法选择所需元素并将其返回到jQuery对象中。您还应该为其应用CSS类，因为您应该尽可能避免在HTML或JS代码中使用任何内联样式。

$('#map .elem').eq(0).addClass('foo');

.foo {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
  <div class="elem">
    hey1
  </div>
  <div class="elem">
    hey2
  </div>
  <div class="elem">
    hey3
  </div>
</div>

Answer 4

只需更改代码的这一行：

var elems = $('#map .elem');
elems.eq(0).css("color", "white");

为什么这个jquery css不起作用？

4 个答案: