Как добавить определенные атрибуты к нескольким элементам DOM?

Question

[Shakhrom Mukumov]

Доброго времени суток. Прошу помощи новичку от профи и не только.
В JS я совсем еще новичок, с поисковиком дружу, только вот сформулировать вопрос по JQuery(евски) пока не получается )))
Суть задачи следующая:
1) Определить у div блока свойство css, background-color, которые заданы в CSS. (Сделал)
2) Добавить этому же div блоку атрибут data-color, с найденным ранее значением (background-color). (Сделал)

Так вот, как быть, если у меня несколько таких div блоков с разным классом и разным значением цвета фона, не повторять ведь JQuery код для разных div блоков ?! Пробовал добавлять классы через запятую "," - не работает )))

Вот пример того что я сделал. КЛИК!

$(document).ready(function() {
			var bgColor = $('.panel0').css('background-color'); //Определяем цвет фона
			$('.panel0').attr('data-color', bgColor); //Добавляем атрибут с найденным цветом фона
    });

Answer 1

[Ильдар Гизетдинов]

$('.panel').each(function () {
      var bgColor = $(this).css('background-color'); //Определяем цвет фона
      $(this).attr('data-color', bgColor); //Добавляем атрибут с найденным цветом фона
});

Comments

[Shakhrom Mukumov]

Круто, работает, спасибо большое!

Answer 2

[Евгений Вольф]

Подозреваю, что как-то так.

$(document).ready(function() {
      $('.panel0 .panel1 .panel2').each(function(i, e) {
        var bgColor = $(this).css('background-color'); //Определяем цвет фона
        $(this).attr('data-color', bgColor); //Добавляем атрибут с найденным цветом фона
      })						
    });

Ещё можно .panel0 .panel1 .panelX заменить на div и операция будет проходить со всеми слоями вообще...

Comments

[Ильдар Гизетдинов]

Вы в курсе что ваш код не работает? :D

[Shakhrom Mukumov]

Спасибо огромное, работает )) То что надо, особенно возможность добавления нескольких классов через запятую ",". До вас ответил Ильдар, пока не совсем понимаю чем отличается ваш вариант от варианта Ильдара, но в обеих случаях работает )))

[Евгений Вольф]

Shakhrom Mukumov: главное, - функция .each(...); для набора элементов. И вместо $this можно использовать e (второй аргумент функции).

Ильдар Гизетдинов: честно говоря не проверял, но автор вопроса говорит что работает :))

[Maks Codov]

Хороший ответ. можно без переменной, тоже работает
$(document).ready(function() {
$('div').each(function(i, e) {
$(this).attr('data-color', $(this).css('background-color'));
})
});

[Ильдар Гизетдинов]

Евгений Вольф: у вас в перечислении классов нет запятых, он скорее всего заменил всё на div :)

[Shakhrom Mukumov]

Ильдар Гизетдинов: нет, я просто добавил запятые ))

[Shakhrom Mukumov]

Maks: круто, тоже работает (без переменной), спасибо ))

[Евгений Вольф]

Главное, автор вопроса получил ответ :)))

Answer 3

[Варфаломей Изольдин]

У вас ведь есть класс "panel". Через него и добавляйте.

$('.panel').each(function( index ) {
      var bgColor = $(this).css('background-color');
      $(this).attr('data-color', bgColor); 
});

Comments

[Shakhrom Mukumov]

Да, так тоже работает, спасибо.