Add css font color with jquery

Question

Sure it's a simple question, but I can't fix it, can somebody help me?

This is the original line

$('.winning-col', this).text($('td.win', this).length);

and this is where I came up with, surely not correct.

$('.winning-col', this).text.css('color', 'pink'($('td.win', this).length));

Answer 1

You could do it the quick-way:

$(".winning-col", this)
  .text($("td.win", this).length)
  .css("color", "pink");

But ideally, you would use .addClass instead:

$(".winning-col", this)
  .text($("td.win", this).length)
  .addClass("hilighted");

Where

.hilighted { color: pink; }

Answer 2

Thought I'd add a little extra information here, just in case you're not aware of it. When you use the .css() function, you can also specify the arguments as what's called an object literal, which basically means something in this format:

{objectVarName1: objectVarValue1, objectVarName2: objectVarValue2}

You can also do it like this:

{"objectVarName1": objectVarValue1, "objectVarName2": objectVarValue1}

With the .css() function, you can do this:

$("#the_item_id").css({backgroundColor: "#333", color: "#FFF"});

If the variable names you're passing aren't in quotes, you have to do it in camel-case like I did above, which means that the first word of the name of the CSS property is lowercase, but every word after that is in caps (so the CSS property background-color becomes backgroundColor). To do the equivalent of the above in the form where you put the name of the variable in the object in quotes, you would just do this:

$("#the_item_id").css({"background-color": "#333", "color": "#FFF"});

Just wanted to point out that you don't have to chain multiple calls to .css() together, that you can do all of your CSS changes at once. ;)