-1

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.

Improve this question
9
  • I don't quite understand. What color should spanOne be? pink or purple? Why the array with stuff? I don't get it...I mean if it's css why not set it in a css stylesheet and if you need to change styles use classes with addClass removeClass toggleClass Commented May 30, 2012 at 18:07
  • The idea is that the first list item, within that the first span has a font-weight of bold, second list item first span should be purple, third list item first span should be pink. I've simplified the css in this demo. The final code will contain other values such as scroll positions. Commented May 30, 2012 at 18:08
  • Use a css class? This example is odd... There are names like spanOne etc. yet the spans themselves have no names or ids. You could use class selectors to add or remove other CSS classes dynamically. Trying to do it the way shown in your example is bound to be brittle. Commented May 30, 2012 at 18:10
  • 1
    @Bruno Why spanOne, spanTwo and spanThree? Can I change that structure? Commented May 30, 2012 at 18:10
  • @Vega - Yep. All names can be changed. Commented May 30, 2012 at 18:11

2 Answers 2

Reset to default
0

IT is easier if you change your items structure.. see below,

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.