jqueryを使用しているループを使用しているCSS

Question

私は4つのdivがあり、このオブジェクトの配列に従ってそれぞれの背景を適用する必要があります。私はメソッドcss（）を知っていましたが、どのようにループするか分かりませんでした。

[ 
    { 
    "tix_type": "adult", 
    "bg": "gold", 
    "tix_pax": 1 
    }, 
    { 
    "tix_type": "child", 
    "bg": "brown", 
    "tix_pax": 0 
    }, 
    { 
    "tix_type": "senior", 
    "bg": "red", 
    "tix_pax": 2 
    }, 
    { 
    "tix_type": "disabled", 
    "bg": "green", 
    "tix_pax": 1 
    } 
] 

1つのdivが緑、金、2つのdivが赤であるように、シーケンスは必要ありません。

Answer 1

あなたはHTML構造を提供していないので、これは基本的なロジックを理解するのに役立ちます。部品番号$('div.styleMe:eq(' + i + ')')をそれぞれの救急車に変更する必要があります。これが役に立ったら教えてください。

var config = [{ 
 
    "tix_type": "adult", 
 
    "bg": "gold", 
 
    "tix_pax": 1 
 
}, { 
 
    "tix_type": "child", 
 
    "bg": "brown", 
 
    "tix_pax": 0 
 
}, { 
 
    "tix_type": "senior", 
 
    "bg": "red", 
 
    "tix_pax": 2 
 
}, { 
 
    "tix_type": "disabled", 
 
    "bg": "green", 
 
    "tix_pax": 1 
 
}] 
 

 
$.each(config,function(i, v) { 
 
    $('div.styleMe:eq(' + i + ')').css('background-color', v.bg); 
 
});

div { 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="styleMe"></div> 
 
<div class="styleMe"></div> 
 
<div class="styleMe"></div> 
 
<div class="styleMe"></div>

Answer 2

var styleArray = [ 
    { 
    "tix_type": "adult", 
    "bg": "gold", 
    "tix_pax": 1 
    }, 
    { 
    "tix_type": "child", 
    "bg": "brown", 
    "tix_pax": 0 
    }, 
    { 
    "tix_type": "senior", 
    "bg": "red", 
    "tix_pax": 2 
    }, 
    { 
    "tix_type": "disabled", 
    "bg": "green", 
    "tix_pax": 1 
    } 
]; 

$(document).ready(function(){ 
    $(".styled-divs").each(function(index){ 
     $(this).css("background-color", stylesArray[index].bg); 
    }); 
}); 

HTMLコード

<div class="styled-divs"></div> 
<div class="styled-divs"></div> 
<div class="styled-divs"></div> 
<div class="styled-divs"></div> 

Answer 3

あなたは一般的なクラス（または任意のセレクタ）を持っている場合は、それらすべてを選択するには、その後

var array = [{ 
 
    "tix_type": "adult", 
 
    "bg": "gold", 
 
    "tix_pax": 1 
 
}, { 
 
    "tix_type": "child", 
 
    "bg": "brown", 
 
    "tix_pax": 0 
 
}, { 
 
    "tix_type": "senior", 
 
    "bg": "red", 
 
    "tix_pax": 2 
 
}, { 
 
    "tix_type": "disabled", 
 
    "bg": "green", 
 
    "tix_pax": 1 
 
}]; 
 

 
$('.target').css('background-color', function(i) { 
 
    return array[i].bg; 
 
});

.target { 
 
    margin-bottom: 5px; 
 
    min-height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div>

Answer 4

jQuery css機能を直接お試しください。

var arrayOfObjRef = [ 
 
    { 
 
    "tix_type": "adult", 
 
    "bg": "gold", 
 
    "tix_pax": 1 
 
    }, 
 
    { 
 
    "tix_type": "child", 
 
    "bg": "brown", 
 
    "tix_pax": 0 
 
    }, 
 
    { 
 
    "tix_type": "senior", 
 
    "bg": "red", 
 
    "tix_pax": 2 
 
    }, 
 
    { 
 
    "tix_type": "disabled", 
 
    "bg": "green", 
 
    "tix_pax": 1 
 
    } 
 
]; 
 

 
$('div.content').css('background-color', function(i) { 
 
    return arrayOfObjRef[i].bg; 
 
}); 
 

 
console.log('First object bg: ' + arrayOfObjRef[0].bg); 
 
console.log('second object tix_type: ' + arrayOfObjRef[1].tix_type); 
 
console.log('third object tix_pax: ' + arrayOfObjRef[2].tix_pax); 
 
console.log('third object bg: ' + arrayOfObjRef[3].bg);

.content { 
 
    height:20px; 
 
    margin:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div> 
 
<div class="content"></div>