Question

I’m trying to write an each function that looks at each list item and then within that item to each span, applying some css to each span uniquely..

When I start to get down into it I get lost and can’t really figure out how to correctly get the unique values to each span within each list item..

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

Any ideas?

Edit – I realize that this seems like a job for class names but I have simplified the type of css I am trying to use for this example only. Later on I’ll be passing some more complex css that will rely on other values such as scrollTop and viewportHeight.

Answer 1

First, it will be better if you change your items like following:

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

If you don’t want to change the items structure then try this:

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