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

Posted 2023-05-09

技术标签:

【中文标题】如何将样式应用于 JQuery 数组中的特定元素【英文标题】：How to apply style to a specific element in JQuery array 【发布时间】：2020-03-22 16:31:14 【问题描述】：

我正在学习 JQuery 的基础知识，但无法解决这个问题：给定 3 个绿色 <li> 元素将第一个和第三个元素变为红色，将第二个元素变为橙色。

代码：

<!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 licolor: 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"); 不起作用。

【问题讨论】：

这能回答你的问题吗？ $(element)[index].addClass(); does not work 【参考方案1】：

你在 DOM 对象而不是 jQuery 对象上调用 css 作为索引器 [] 给你 DOM 对象你需要 eq() 而不是索引器

Live Demo

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

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

你也可以直接在选择器中使用:eq()

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

【讨论】：

【参考方案2】：

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

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

Fiddle Demo

【讨论】：

【参考方案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

注意，来自文档：

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

【讨论】：

【参考方案4】：

请在 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
);

【讨论】：

【参考方案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 数组中的特定元素的主要内容，如果未能解决你的问题，请参考以下文章