将相同的CSS属性应用于多个元素

Question

我有一系列元素（超过20个）都需要用户输入的颜色。使用PHP + CSS我最终得到了这个输出：

#one, #two, #three, #four, #five, #etc { color: #222; }

它工作正常，但我现在需要在使用jQuery / Javascript加载DOM后编辑该颜色。同样，它将是用户输入，因此颜色可以是任何颜色。

是否可以快速将更改应用于所有元素？或者我必须做以下事情吗？

$('#one').css('color', newColor );
$('#two').css('color', newColor );
.... etc

我希望有一种方法，因为正如我所提到的，有20多个元素需要这种改变。 谢谢你们

Answer 1

你可以这样做：

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );

但是如果你有一个共同的类，它会使它更容易。

$('.commonCls').css('color', newColor );

或者，如果这些元素是div（并且是唯一的元素）并且在容器container内，那么您可以这样做。

 $('.container').find('div').css('color', newColor);

并且如果您事先知道颜色会更好，只需为类名添加一个cssrule并将该类添加到这些元素中，这将有助于更多的级联，而不是指定内联颜色（css()执行）。

$('.commonCls').addClass(newClass);

添加，如果你必须使用id，如果你的id有一个共同的部分。例如：#one-Section, #two-Section etc..那么你可以使用属性endswith selector（$），你也包含（*）和startswith（^）选择器。

$('[id$="Section"]').addClass(newClass); //or .css

Answer 2

您可以使用班级选择器。

$('.myclass').css('color', newColor );

or

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );