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

Question

我想用相同的值更新很多 类 个对象的 css。例如：

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

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

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

Answer 1

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

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

Answer 2

您可以对所有元素使用通用 class。请注意，元素可以有多个 classes。那么你可以使用 like,

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

或者您也可以使用逗号分隔 select 或者像这样，

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

另一种选择是使用以 selector.

开头的属性

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

这将 select 所有 id 以 "selector" 开头的元素。