Добавить цвет в div, используя атрибут name

Question

Ниже приведено оба divs red css, я хотел бы изменить цвет уникально для каждого div.

<div class="foo" name="red">red</div> 
<div class="foo" name="blue">blue</div> 

<script type="text/javascript"> 

$('.foo').each(function() { 
    var color = $('.foo').attr('name'); 
    $(this).css('color',color); 
}); 

</script> 

Answer 1

Попробуйте это:

$('.foo').each(function() { 
    var color = $(this).attr('name'); 
    $(this).css('color',color); 
}); 

Answer 2

Я думаю, что он выбирает первый элемент Foo.

вы должны попробовать и использовать селектор $ (это)

Answer 3

Я хотел бы предложить следующее:

$('.foo').css('color', function() { 
    return this.getAttribute('name'); 
}); 

JS Fiddle demo.

Анонимная функция, переданная в css(), выполняет итерацию по каждому из элементов, возвращаемых селектором, поэтому this в каждом случае относится к текущему итерационному элементу.

Обратите внимание на использование getAttribute('name'), это происходит потому, что div не имеет name свойство (атрибут не является действительным, вне input, select, button и т.д ... элементов).

В таком случае я бы также предлагают использовать пользовательские data-* атрибуты для хранения цветов, например:

<div class="foo" data-color="red">red</div> 
<div class="foo" data-color="blue">blue</div> 

И с помощью JQuery:

$('.foo').css('color', function() { 
    return $(this).data('color'); 
}); 

JS Fiddle demo.

Ссылки:

• css().
• data().

Answer 4

я думаю, что это то, что вы хотите ... Plz очистить код ..

<div class="foo" name="blue">Hola</div> 

<div class="foo" name="red">Hello</div> 

<script type="text/javascript"> 

$("div").each(function() { 
var color = $('.foo').attr('name'); 
document.write("color got is: "+color); 
color=$(this).attr('name'); 
$(this).css('background-color',color); 

document.write(" now color is: "+color)