CODEWITHSUNDEEP
jqueryarrayseach
user120944
user120944

Reputation:

jQuery object within array?

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.

Upvotes: -1

Views: 100

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: -1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Upvotes: 0

Related Questions