首先,如果您更改items
以下内容会更好:
var items = [
[
'font-weight: bold',
'text-decoration: underline',
'text-transform: uppercase',
],
[
'color: purple',
'color: yellow',
],
[
'color: pink'
]
];
$(document).ready(function() {
$('li').each(function(liIndex, li) {
$('span', this).each(function(index, el) {
var curCSS = items[liIndex][index].split(':');
$(this).css(curCSS[0], curCSS[1])
});
});
});
演示 1
如果您不想更改items
结构,请尝试以下操作:
var items = [
{
spanOne: 'font-weight: bold',
spanTwo: 'text-decoration: underline',
spanThree: 'text-transform: uppercase'},
{
spanOne: 'color: purple',
spanTwo: 'color: yellow'},
{
spanOne: 'color: pink'}
];
$(document).ready(function() {
var ref = ['spanOne', 'spanTwo', 'spanThree']; // an array to make reference
$('li').each(function(liIndex, li) {
$('span', this).each(function(index, span) {
var curCSS = items[liIndex][ref[index]].split(':');
$(this).css(curCSS[0], curCSS[1])
});
});
});
演示 2