dynamically set a sprite background-position in table cells
Hello, I'm trying to dynamically set the "flags sprite" background-position: for each country based on their "id". I've tried a bunch of different statements like if/else, while loop, etc. with no luck. The code marked // ISSUE is where I am now.
Thank you,
t6s
//capture json data and render table rows and data
$(document).ready(function(){
$.getJSON( "https://s3.amazonaws.com/reuters.sochi.medals/medals.json", function( data ) {
$.each(data, function (i, val) {
var sort_gold = data.sort(function(a,b){return b.gold - a.gold;});
var k = i+1; k.toString(); //increment array key/index + 1 convert to string for sorting
var medal_totals = parseFloat(data[i].gold) + parseFloat(data[i].silver) + parseFloat(data[i].bronze);
//table render
$('<tr class="cntRow"><td class="one">' + k + '</td>' + '<td class="flagWrap"><div class="flag">' + data[i].name + '</div></td>' + '<td class="cntId">' + data[i].id + '</td><td class="gold gCount">' + parseFloat(data[i].gold) + '</td><td class="silver sCount">' + parseFloat(data[i].silver) + '</td><td class="bronze bCount">' + parseFloat(data[i].bronze) + '</td><td class="toats">' + medal_totals + '</td></tr>').appendTo("#content");
// ISSUE
//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);
//END ISSUE
$('#silver').bind('click', function () {
//var clk = $(css('border-top','solid', '3px', '#84827B'));
// $(this).toggle(css('border-top','solid', '3px', '#84827B'));
});
//
//sorting
$("table").tablesorter({
headers: {
0: {
// disable it by setting the property sorter to false
sorter: false
},
1: {
sortInitialOrder: "desc",
}
}
});
return i<9;
return sort_gold;
});
});
//end document ready
});