Can't Change CSS of Span Through jQuery

Question

In my below coe the console.log fires, so the if statement is definitely passing. If I try to console.log() the CSS of $(this) I get undefined. I've done console.log($this) and it returns an object with outer HTML <span class="formState"></span>. I've had a few friends look at this and have done a lot of research but have come up short.

<span class="formState"><?php echo $IRFormResults[$count];$count++ ?></span>

$(".formState").each(function() {
    if ($(this).text() == 'n/a') {
        console.log('Got an n/a');
        $(this).css('color:red');
    }

.formState {
    color: green;
    display: inline-block;
    min-width: 125px;
    margin-left: 10px;
    float:right;
}

score 5 · Accepted Answer · answered Nov 12 '15 at 20:10

5

Your syntax isn't quite right. The css() method takes two parameters; the CSS property and its value:

$(this).css('color', 'red');

Also note that you can amend your logic to use a filter() and also to trim() the text of the element to save any whitespace causing problems:

$(".formState").filter(function() {
    return $(this).text().toLower().trim() == 'n/a';
}).css('color', 'red');

answered Nov 12 '15 at 20:10

Rory McCrossan

331,213
40
305
339

Alright, you're totally right. Thanks so much. Though, how would I approach printing out its existing css? Just incase I wanted to. – dyllandry Nov 12 '15 at 20:16
It's actually quite complicated to get all the CSS rules on an element because there are hundreds of default settings applied by the browser before you put any styling on it yourself. See [this answer](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) for more details. – Rory McCrossan Nov 12 '15 at 20:17

score 1 · Answer 2 · edited Nov 12 '15 at 20:12

1

You should change this:

$(this).css('color:red');

To this :

$(this).css('color','red');

edited Nov 12 '15 at 20:12

Rory McCrossan

331,213
40
305
339

answered Nov 12 '15 at 20:12

Nika Javakhishvili

441
8
19

score 0 · Answer 3 · answered Nov 12 '15 at 20:13

0

Either

$(this).css('color','red');

or

$(this).css({'color':'red'});

answered Nov 12 '15 at 20:13

void

36,090
8
62
107

Can't Change CSS of Span Through jQuery

3 Answers3