Question

我正在学习JQuery的基础知识，并且无法解决这个问题：给定3个绿色<li>元素将第1和第3个元素转换为红色，将第2个元素转换为红色橙色。

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>element</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css" media="screen">
      ul li{color: green;}
    </style>
  </head>
  <body>
    <ul>
      <li>text 1</li>
      <li>text 2</li>
      <li>text 3</li>
    </ul>
    <script>
      var lis = $("ul li").css("color", "red");
    </script>
  </body>
</html>

我能够将所有元素都设置为红色，但我无法制作第2个橙色：lis[1].css("color", "orange");无法正常工作。

Answer 1

您正在调用DOM对象上的css而不是jQuery对象，因为索引器[]为您提供DOM对象您需要eq()而不是索引器

<强> Live Demo

lis.eq(1).css("color", "orange");

描述：将匹配元素集减少到指定的索引。

您也可以直接在选择器

中使用:eq()

$("ul li:eq(1)").css("color", "red");

Answer 2

您可以通过应用:nth-child选择器

来使用纯CSS实现它

ul li:nth-child(2) {
    color: red;
}

<强> Fiddle Demo

Answer 3

由于您正在学习jQuery，因此您可以使用:even selector：

var lis = $('ul li');
lis.filter(':even').css('color', 'red'); // Zero based indexing selects 0 and 2
lis.filter(':odd').css('color', 'orange'); // Selects 1

请注意，来自文档：

因为：即使是jQuery扩展而不是CSS规范的一部分，查询使用：甚至无法利用本机DOM querySelectorAll（）方法提供的性能提升。要在使用时获得最佳性能：甚至选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：even”）。

Answer 4

请在 document.ready() 中编写代码并使用 eq

所有元素的

 $(document).ready(function(){
     $("ul li").css("color", "red");
    });

for particluar element

 $(document).ready(function(){
    $("ul li:eq(0)").css("color", "red"); //for first element
    $("ul li:eq(1)").css("color", "red");//for second element
    $("ul li:eq(2)").css("color", "red");//for third element
});

Answer 5

如果您只想选择第一个元素而不是使用此元素...

使用CSS伪选择器：first-of-type

$（“ li：first-of-type”）。css（“ color”，“ orange”）;

或者您可以使用内置在选择器中的jQuery

$（“ li：first”）。css（“ color”，“ orange”）;

两者都可以正常工作...但是jQuery方法比CSS pesudo选择器要慢因此请使用第一个以获得更好的性能

现在，如果您要选择其他索引，请使用.eq（）

$（selectorName.eq（index））。css（...）;

如何将样式应用于JQuery数组中的特定元素

代码：

5 个答案: