Add css font color with jquery

Question

Hello everyone,

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

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

Answer 2

Try this:

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

Each function call, even in jQuery, is still separate. The first call is to .text() to change the text. The second is to .css() to change the CSS. It just so happens that in jQuery each function call of this type returns a jQuery object on which you can call more functions, thus nicely chaining them all together.

Answer 3

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 4

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. ;)