jquery - .each( ) 内の個々のアイテムに対する固有のアクション

Question

.each() 関数内で結果ごとに個別のコードを書くことは可能ですか?

この例でやりたいことは、各項目に固有の色を持たせることです。これは .each() 内で実行できますか?

$(document).ready(function() {    
    $('li').each(function() {
        $(this).css('color', 'purple');
    }); 
// End it all    
});​

http://jsfiddle.net/rJGYL/

編集:より簡潔にするために、各アイテムに一意の css を追加することは可能ですか? たとえば、色だけでなく、最初のアイテムのフォントの太さを太字にし、次のアイテムを斜体にしたいとします...

Answer 1

$(document).ready(function() {

var colors = ['red','green', 'blue', 'pink']

    $('li').each(function(i) {
        $(this).css('color', colors[i]);
    });


// End it all    
});​

JSFiddle： http: //jsfiddle.net/lucuma/aU4kr/

各関数のインデックスを使用して、配列を参照できます。それぞれの詳細が必要な場合は、http： //api.jquery.com/each/にあります。

Answer 2

ええ、あなたは次のコードを使用してこれを行うことができます

$(document).ready(function() {
  var colors = ['black','red','purple','yellow']
    $('li').each(function(i) {
        $(this).css('color', colors[i]);
    });


// End it all    
});​

ワーキングフィドル

色をcolors配列に入れます。

アップデート

このような配列のliごとに異なるcssを定義できます

$(document).ready(function() {
    var css = [{'font-weight':'bold','font-size':'25px','color':'red'}
               ,{'color':'purple'},{'color':'black'},{'color':'yellow'}]
    $('li').each(function(i) {
        $(this).css(css[i]);

    });


// End it all    
});​

ワーキングフィドル

オブジェクトの配列のペアcssとしてプロパティを定義しました。'key':'value'css

Answer 3

使用可能な色の配列を指定してから、各アイテムのインデックスを使用してその配列から選択できます。

http://jsfiddle.net/rJGYL/2/

$(document).ready(function() {
    var colors = ["purple", "red", "blue", "yellow"];

    $('li').each(function(index) {
        $(this).css('color', colors[index]);
    });


    // End it all    
});​

Answer 4

var colors= ['red','green', 'blue'];

$('li').css('color', function() {
    return colors[i];
});