javascript - 如何在相同的 div 名称中使用 jquery 添加不同的样式？

Question

如何使用 jquery 在相同的 div 名称中添加不同的样式？

像这样的例子。

<div id="link">
    <div class="one">This is first link</div>
    <div class="one">This is second link</div>
    <div class="one">This is third link</div>
</div>

我想为 .one 中
的所有文本添加不同的颜色。第一类使用#FFF
第二类使用#000
第三类使用#333

Answer 1

你可以这样做：

var $oneDivs = $("#link div.one");
$oneDivs.eq(0).css("color","#FFF");
$oneDivs.eq(1).css("color","#000");
$oneDivs.eq(2).css("color","#333");

也就是说，首先按类选择所有 div，然后通过它们的（从零开始的）索引选择各个 div 并设置所需的颜色。

演示：http: //jsfiddle.net/8kNF6/

Answer 2

var colors = ['#FFF', '#000', '#333']
$('#link div.one').each(function(idx, elem) {
   $(elem).css('color', colors[idx]);
});

Answer 3

我意识到这个问题专门询问如何用 jQuery 来做，但你知道你可以用一个 nth-child css 选择器来做到这一点，而根本不必使用 javascript，对吧？

'把它扔出去:)

#link div:nth-child(1) { color: #FFF; }
#link div:nth-child(2) { color: #000; }
#link div:nth-child(3) { color: #333; }