许多选择器和添加类

Posted 2023-03-05

【中文标题】许多选择器和添加类

【英文标题】：Many selectors & add class

【发布时间】：2012-06-21 14:13:35

【问题描述】：

我正在使用 jQuery 来处理 IE7 和 8 中不受支持的选择器（主要是 :nth-child 和 :last-child）。我读到 addClass 比使用 jQuery 的 css 方法性能更高，所以我正在重构我的 JS 来做到这一点。

将同一个类添加到多个（有时很多！）不同的选择器的最佳方法是什么？将它们全部放入同一个语句并在列表末尾使用 addClass 是否安全？

例如：

$('.selector1:nth-child(3),
   .diff-selector2:last-child,
   #another-selector:nth-child(2),
   tr.highlighted td:last-child,
   h2.job-title:last-child').addClass('fallback-class');

选择器列表是否有限制或某个点变慢？我应该为这些选择器列表创建变量吗？有更好的方法吗？

最后说明：不幸的是，使用 Selectivizr 使 IE7 停止运行。这就是我决定使用上述方法的原因。

【问题讨论】：

我认为添加一个通用类来教授相关控件不是一种选择？

只需重构您的 html，这样您就永远不需要使用那些非常慢的选择器。如果没有缓存，对于每个检查第 n 个子元素的元素，都需要遍历该元素的父元素的所有子元素。

不幸的是，这是我无法访问 HTML 的情况，而我可以访问的地方是由 CMS (Drupal) 控制的东西。

然后在你的问题中添加html

让我们看看我是否可以不发布 HTML - 这些页面很大而且该网站还没有上线。我并不是要对我的回复刻薄，我只是宁愿不发布实际的 HTML，并且输入一堆虚假的 HTML 可能不会有太大帮助。根据您的第一个回复，Esailija，您建议我应该先尝试通过 ID 或第 n 个孩子的父元素进行选择，然后使用 filter 或 find 之类的东西，并将这些选择器缓存在变量？

【参考方案1】：

我想到了两种方法

1) 你可以为你的元素设置一个通用类并将它们添加一个类

<p class="addThis">1</p>
<p>2</p>
<span class="addThis">3</span>
<a>4</a>
<p>5</p>
<a class="addThis">6</a>

$('.addThis').addClass('fallback-class'); //1,3,6 will be added classes

2) 你可以使用父/子方法

<p>
    <a>1</a>
    <span>2</span><!-- wont be added class -->
</p>
<p>
    <a>3</a>
</p>
<a>3</a><!-- wont be added class -->
<p>4</p><!-- wont be added class -->

$('p').children('a').addClass('fallback-class');
//this will adds class which got "a" selector inside "p"

$('a').parent('p').addClass('fallback-class');
//this will adds class "p" selector which got children "a"