将相同的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