CSS jQuery kullanarak döngü kullanma

Question

4 div var ve bu nesneler dizisine göre her biri için arka plan uygulamak zorundayım. Css() yöntemini biliyorum ama nasıl döngü yapılacağını bilmiyordum.

[ 
    { 
    "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 yeşil, altın ve 2 div kırmızı gibi, diziye gerek yoktur.

Answer 1

HTML yapısını sağlamadığınızdan bu, temel mantığı anlamanıza yardımcı olur. İlgili seçicilerinize $('div.styleMe:eq(' + i + ')') bölümünü değiştirmeniz gerekebilir. Bu yardımcı olursa bana bildirin. Eğer varsa

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 KOD

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

Answer 3

ortak sınıf (veya herhangi bir seçici)

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>

sonra hepsini seçin 10

Answer 4

Doğrudan jQuery css işlevini deneyin.

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>