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

How to apply style to a specific element in JQuery array

本文关键字：元素 数组 JQuery 样式 应用于      更新时间：2023-09-26

我正在学习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>

我可以把所有元素都变成红色，但我不能把第二个变成橙色：lis[1].css("color", "orange");不起作用。

您在DOM对象上调用css而不是jQuery对象，因为索引器[]为您提供了DOM对象您需要eq（）而不是索引器

实时演示

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

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

您也可以直接在选择器中使用：eq（）

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

您可以通过应用:nth-child选择器：使用纯CSS来实现它

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

Fiddle演示

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

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

注意，来自文档：

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

请在document.ready（）中编写代码，并使用eq

所有元素

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

对于特定元素

 $(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
});

如果您只想选择第一个元素，请使用。。。

使用CSS pesudo选择器：类型的第一个

$（"li:first-of type"）.css（"color"，"orange"）；

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

$（"li:first"）.css（"color"，"orange"）；

两者都会很好。。。但是jQuery方法比CSS的pesudo选择器相对较慢所以使用第一个可以获得更好的性能

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

$（selectorName.eq（index））.css（…）；

相关文章：