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
のすべてのテキストに別の色を追加したい 1 番目のクラスは #FFF
で 2 番目のクラスは #000
で 3 番目のクラスは #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 を選択し、次に (0 から始まる) インデックスによって個々の 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

I realize the question specifically asks how to do it with jQuery, but you do know you could do that with an nth-child css selector and not have to use javascript at all, right?

'just throwin it out there :)

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