如何在jquery中有效地更新多个选择器类上的css

Question

我想更新许多具有相同值的对象类的css。例如：

$("selector1").css("background-color", "#abc");
$("selector2").css("background-color", "#abc");
...
$("selector50").css("background-color", "#abc");

我使用的是一个包含数百个类的小部件框架，我需要用一些jquery函数更新这些类的css，有点像简化的themeroler可视化。目前，我正在浏览我的css文件，并将类添加到代码中的javascript数组中，例如，当用户更新<input type="color">时，他们可以通过自动触发的arrayOfSelectors.each()函数更新css。

将所有小部件类组装到一个数组中需要大量的手动操作。有更聪明的方法吗？

Answer 1

您可以为所有元素使用一个公共类。请注意，元素可以有多个类。然后你可以使用

$(".commonClass").css("background-color", "#abc");

或者你也可以像这样使用逗号分隔的选择器，

$("selector1,selector2,selector3").css("background-color", "#abc");

另一种选择是使用以选择器开头的属性。

$("[id^=selector]").css("background-color", "#abc");

这将选择所有元素，这些元素的id以"selector"开头。

Answer 2

使用逗号分隔的多重选择器。像这样：

$("selector1,selector2").css("background-color", "#abc")