jQuery addClass example

Change class name on click in jQuery

by SpeedLogic

HTML

<div id="cont">
"ad","Andorra","1","Western Europe"
"at","Austria","1","Western Europe"
"be","Belgium","1","Western Europe"
"ch","Switzerland","1","Western Europe"
"de","Germany","1","Western Europe"
"dk","Denmark","1","Western Europe"
"es","Spain","1","Western Europe"
"fi","Finland","1","Western Europe"
"fr","France","1","Western Europe"
"gb","United Kingdom","1","Western Europe"
"gr","Greece","1","Western Europe"
"ie","Ireland","1","Western Europe"
"is","Iceland","1","Western Europe"
"it","Italy","1","Western Europe"
"li","Liechtenstein","1","Western Europe"
"lu","Luxembourg","1","Western Europe"
"mc","Monaco","1","Western Europe"
"mt","Malta","1","Western Europe"
"nl","Netherlands","1","Western Europe"
"no","Norway","1","Western Europe"
"pt","Portugal","1","Western Europe"
"se","Sweden","1","Western Europe"
"sm","San Marino","1","Western Europe"
"va","Holy See (Vatican City State)","1","Western Europe"
"ca","Canada","2","US & CA"
"us","United States","2","US & CA"
"ae","United Arab Emirates","5","West Asia"
"am","Armenia","5","West Asia"
"az","Azerbaijan","5","West Asia"
"bh","Bahrain","5","West Asia"
"cy","Cyprus","5","West Asia"
"ge","Georgia","5","West Asia"
"il","Israel","5","West Asia"
"iq","Iraq","5","West Asia"
"jo","Jordan","5","West Asia"
"kw","Kuwait","5","West Asia"
"lb","Lebanon","5","West Asia"
"om","Oman","5","West Asia"
"ps","Palestinian Territory","5","West Asia"
"qa","Qatar","5","West Asia"
"sa","Saudi Arabia","5","West Asia"
"sy","Syrian Arab Republic","5","West Asia"
"tr","Turkey","5","West Asia"
"ye","Yemen","5","West Asia"
"au","Australia","7","Australia"
"nz","New Zealand","7","Australia"
"an","Netherlands Antilles","8","Latin America"
"ar","Argentina","8","Latin America"
"aw","Aruba","8","Latin America"
"bo","Bolivia","8","Latin America"
"br","Brazil","8","Latin America"
"bz","Belize","8","Latin America"
"cl","Chile","8","Latin America"
"co","Colombia","8","Latin America"
"cr","Costa Rica","8","Latin America"
"cu","Cuba","8","Latin...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var object = {};
var lines = $('#content').html().split('/n');
$.each(lines, function(index, line){
	var lineA = line.split(',');
  var id = line[2].slice(1, -1);
  var cName = line[1].slice(1, -1);
  var cLabel = line[0].slice(1, -1);
  if (object[id] === undefined) {
  	object[id] = [];
    object[id].push({label:cLabel, name:cName})
  }
//  str = str.slice(1, -1);
});

console.log(result);