在 jQuery 中使用 .css 属性

Question

Code 1

jQuery("ul#leftmenuacc").find("span.leftmenutextspan")[0].css('color', 'red');

上面的代码不起作用，所以我不得不用另一种方式来做[下面提到的]

Code 2

jQuery("ul#leftmenuacc").find('span.leftmenutextspan').each(function(index){ if(index ==0) jQuery(this).css('color', 'red') });

我在这里很困惑为什么代码 1 有效吗？我从 Jquery Docs 阅读了关于 .css 的文档，但无法找不到我缺少的东西。

有没有一种优雅的方法来做到这一点？因为目前我正在迭代很多没有用的 DOM 项。

Answer 1

所有其他答案都提供了可行的解决方案。如果性能对您来说并非完全不重要，还应考虑以下因素：

1. 避免使用 :eq （或 :first，如建议的那样）一些其他答案）只要有可能，选择器。

   通常，jQuery 使用浏览器原生的 querySelectorAll() DOM 遍历方法，这比 jQuery 自己解析 DOM 树要快得多。

   由于 :eq 和 :first 是 jQuery 特定的，因此不能使用 querySelectorAll() – 因此，jQuery 不得不求助于使用相反，它自己的、慢得多的遍历引擎。

   对于这种情况，推荐的替代方案是使用 jQuery 的 filter() 或 first() （公平地说，它在内部映射到 filter()< /代码>）方法：

   jQuery("ul#leftmenuacc").find("span.leftmenutextspan").first().css('color', 'red');
   

   引用jQuery自己关于:first的文档：

   <块引用>

   因为 :first 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :first 的查询无法利用本机 DOM querySelectorAll() 方法提供的性能提升。

   要在使用 :first 选择元素时获得最佳性能，请首先使用纯 CSS 选择器选择元素，然后使用 .filter(":first")。

   你能获得多少速度？嗯，在标准场景中，.first() 的速度大约是 :first 的 10 倍。

2. 在您的示例中，使用 find() 似乎是不必要的，并且出于与上述相同的原因，会减慢您的代码。这将是更好的选择：

   jQuery("ul#leftmenuacc span.leftmenutextspan").first().css('颜色', '红色');
   

Answer 2

当您执行 $(selector)[0] 时，您将获得 HTMLElement，它没有 css 功能。您可以使用 jQuery 将其包装起来，例如： $($(selector)[0])，但更好的解决方案是使用 :eq(0) 或 :first 选择器：

jQuery("ul#leftmenuacc").find("span.leftmenutextspan:eq(0)").css('color', 'red');

Answer 3

jQuery("ul#leftmenuacc").find("span.leftmenutextspan:first").css('color', 'red');

Answer 4

在代码 1 中，您在 ul#leftmenuacc 之后缺少双引号 (")

，我会这样做

$("span.leftmenutextspan:first", "ul#leftmenuacc").css('color', 'red');