使用名称属性为div添加颜色

Question

以下目前给出了div红色的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)