Применение одного и того же атрибута CSS к нескольким элементам

Question

У меня есть ряд элементов (более 20), которым нужен весь цвет, который вводит пользователь. Использование PHP + CSS Я в конечном итоге с этого выхода:

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

Он отлично работает, но теперь мне нужно изменить этот цвет после того, как DOM загружен с помощью JQuery/JavaScript. Опять же, это будет вход пользователя, поэтому цвет может быть любым.

Есть ли быстрый способ применить изменения ко всем элементам одновременно? Или мне нужно сделать следующее?

$('#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); 

, чтобы добавить, если вам нужно использовать идентификатор, и если ваши идентификаторы имеют общую часть. ex: #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);