CODEWITHSUNDEEP
jqueryhtmlarrays
tekstrand
tekstrand

Reputation: 1493

I have an array of URLs that need to be passed into anchor tags

Using this to pass out an array of rgb values and create anchor tags

$.each(color, function(index, value){
    $('body').append($('<a class="color">').css({
        height: '30px',
        width: '30px',
        'background-color': value
    })
);
});

And then attempting to use this code to pass an array of URL's into those anchor tags

$.each(colorname, function(index, value){
    $('.color').each(function(){
        $(this).attr('href', value);
    });
});

Sample Arrays:

var color = [];
color[ 0 ] = 'RGB(233,232,217)';
color[ 1 ] = 'RGB(227,222,202)';
color[ 2 ] = 'RGB(218,210,186)';
color[ 3 ] = 'RGB(208,189,150)';
color[ 4 ] = 'RGB(213,208,194)';


var colorname = [];
colorname[ 0 ] = '/url1/';
colorname[ 1 ] = '/url2/';
colorname[ 2 ] = '/url3/';
colorname[ 3 ] = '/url4/';
colorname[ 4 ] = '/url5/';

It seems to get all of the URLs, but it appends the last item in the array colorname to all anchor tags.

Upvotes: 0

Views: 415

Answers (3)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

I have a few suggestions:

  1. Segregation of duties -- you are mixing some constant CSS with DOM styling. I would move what you can out of the JavaScript:

    /* in a .css file somewhere... */
.color {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
}

  2. Parallel arrays are always a bad idea. If you have two or more arrays where the items at each index belong together, use an array of JS objects instead, with meaningful property names:

    var colors = [
    {
        rgb: 'RGB(233,232,217)',
        url: '/url1/'
    },
    {
        rgb: 'RGB(227,222,202)',
        url: '/url2/'
    },
    {
        rgb: 'RGB(218,210,186)',
        url: '/url3/'
    },
    {
        rgb: 'RGB(208,189,150)',
        url: '/url4/'
    },
    {
        rgb: 'RGB(213,208,194)',
        url: '/url5/'
    },
];

  3. Keep your jQuery/JS simple. With the above two modifications, your JS code can be reduced to:

    $.each(colors, function () {
     $('<a class="color">')
        .css('background-color', this.rgb)
        .attr("href", this.url)
        .appendTo('body');
});

    The code is very concise and its intent is now very clear. DEMO

Upvotes: 0

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- http://jsfiddle.net/adiioo7/L3qrq/

JS:-

var color = [];
color[ 0 ] = 'RGB(233,232,217)';
color[ 1 ] = 'RGB(227,222,202)';
color[ 2 ] = 'RGB(218,210,186)';
color[ 3 ] = 'RGB(208,189,150)';
color[ 4 ] = 'RGB(213,208,194)';


var colorname = [];
colorname[ 0 ] = '/url1/';
colorname[ 1 ] = '/url2/';
colorname[ 2 ] = '/url3/';
colorname[ 3 ] = '/url4/';
colorname[ 4 ] = '/url5/';

$.each(color, function (index, value) {
    var anchor=$('<a class="color">').css({
        height: '30px',
        width: '30px',
            'background-color': value
    }).attr("href",colorname[index]);
    $('body').append(anchor);
});

Upvotes: 1

Kimtho6
Kimtho6

Reputation: 6184

its make since, you run through you array of colorname's and set all .color to same value.

try this instead

 $('.color').each(function(index){
        $(this).attr('href', colorname[index]);
    });

Upvotes: 0

Related Questions