dynamically set background-position on sprite

Question

I'm working on a table that renders Olympic medal stats. I have one sprite of the flags of each country. I would like to use the country "id" (from the json) to set the background-position of the div that holds the flag for each country.

manual example of what I'm trying to do:

//flag postition
var rus = $('.flag').css('background-position', '0  -51' + 'px');
//var nor = $('.flag').css('background-position', '0  -136' + 'px');
console.log(rus);
//console.log(nor);

jsfiddle: http://jsfiddle.net/tommy6s/J6Gck/

Answer 1

Heres an example using the ID

<div class="flag ' + data[i].id + '">' + data[i].name + '</div>

http://jsfiddle.net/J6Gck/3/

Answer 2

Javascript does not know what the flag of a country look like.

Prepare styles for each country like this:

div.flag.canada
{
    background-position: 0px -34px;
}

div.flag.united.states
{
    background-position: 0 100%;
}

And append the name in the classes, like this:

<div class="flag ' + data[i].name.toLowerCase() + '">...

Demo:

http://jsfiddle.net/NicoO/J6Gck/2/