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').css('color', function() {
    return this.getAttribute('name');
});

JS Fiddle demo

传递给css()的匿名函数迭代选择器返回的每个元素，因此this在每种情况下都指向当前迭代的元素。

请注意使用getAttribute('name')，这是因为div没有name属性（该属性在input之外无效，{{1} }，select等...元素）。

在这种情况下，我还建议使用自定义button属性来存储颜色，例如：

data-*

使用jQuery：

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

JS Fiddle demo

参考文献：

css()。
data()。

Answer 3

我认为它选择了第一个foo元素。

你应该尝试使用选择器$（this）

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)

使用name属性为div添加颜色

4 个答案: