Объект jQuery внутри массива?

Question

Я пытаюсь написать каждую функцию, которая смотрит на каждый элемент списка, а затем внутри этого элемента на каждый промежуток, применяя некоторые css к каждому диапазону однозначно.

Когда я начинаю спускаться в него, я теряюсь и не могу понять, как правильно получить уникальные значения для каждого пролета в пределах каждого элемента списка ..

http://jsfiddle.net/anthonybruno/9sKNZ/2/

Любые идеи?

Редактировать - Я понимаю, что это похоже на задание для имен классов, но я упростил тип css, который я пытаюсь использовать только для этого примера. Позже я буду передавать более сложные css, которые будут полагаться на другие значения, такие как scrollTop и viewportHeight.

Answer 1

Во-первых, это будет лучше, если вы измените свое 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]) 
     }); 
    }); 
}); 

DEMO 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]) 
     }); 
    }); 
}); 

DEMO 2

Answer 2

IT проще, если изменить структуру пунктов .. смотри ниже,

var items = [['font-weight: bold', 
    'text-decoration: underline', 
    'text-transform: uppercase'], 
    ['color: purple', 'color: yellow'], 
    ['color: pink']]; 

$(document).ready(function() { 
    $('li').each(function(liIdx) { // For each list item 
     var curCss = items[liIdx]; 
     $(this).find('span').each(function(idx) { 
      var cssStyle = curCss[idx].split(':'); 
      $(this).css(cssStyle[0], cssStyle[1]); 
     }); // Each span should get unique css value    
    });  
}); 

DEMO