Conditionally changing CSS of a div generated via jquery

Question

I have a bit of a specific question but I'm hoping someone can help me out.

I am basically filling a div (id = 'content') with names from an array and numbers from an API. This part is all fine and the div is appended with the correct content. However, I am now trying to style that content and it is proving more difficult.

What I am trying to do is to get only the numbers to change colour depending on how high they are. My thinking was to do this by generating a span tag around the numbers via jquery and then edit the css of this span after it had been generated. Unfortunately this doesn't seem to be working and I'm wondering if it would be better to split the function up or use a completely different approach?

Any advice would be very welcome!

The code is below:

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#'+ y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#'+ y).css({
      'color': 'orange',
    });
  } else {
    $('#'+ y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
	z = z.replace(/\s/g, '')
	var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
	$.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id="+z+">" + numstring + "</span>"
    colors(num, z)
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
  });
}

var i = 0;
for (;cities[i];) {
	var city = cities[i]
  getAqi(city);
  i++
}

body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

guest271314 · Accepted Answer · 2017-05-12 16:13:11Z

Call colors() after $('#content').append(span + ' ' + "|" + ' ')

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#' + y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#' + y).css({
      'color': 'orange',
    });
  } else {
    $('#' + y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
  z = z.replace(/\s/g, '')
  var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
  $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id=" + z + ">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z);
  });
}

var i = 0;
for (; cities[i];) {
  var city = cities[i]
  getAqi(city);
  i++
}

body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Dan Philip Bejoy · Accepted Answer · 2017-05-12 16:13:50Z

You are trying to access the span's before appending them to the HTML which returns null. Call the colors function after the append.

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  debugger;
  if (x <= 50) {
    $('#' + y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#' + y).css({
      'color': 'orange',
    });
  } else {
    $('#' + y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
  z = z.replace(/\s/g, '')
  var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
  $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id=" + z + ">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z);
  });
}

var i = 0;
for (; cities[i];) {
  var city = cities[i]
  getAqi(city);
  i++
}

body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Cudox · Accepted Answer · 2017-05-12 21:29:41Z

The problem is the position to call the function colors this must be to the final in the function getAqi

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#'+ y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#'+ y).css({
      'color': 'orange',
    });
  } else {
    $('#'+ y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
    z = z.replace(/\s/, '')
    var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
    $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id="+z+">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z)
  });
}

var i = 0;
for (;cities[i];) {
    var city = cities[i]
  getAqi(city);
  i++
}       
    </script>
</body>
</html>

Collectives™ on Stack Overflow

Conditionally changing CSS of a div generated via jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related