jquery addClass not working: "property or method addClass not supported"

Question

I got this javascript working

$(".mail-tile").click(function () {
    var idMessage = $(this).attr('data-message-id');
    $('.mail-tile').removeClass(classeEvidenzaRigaSelezionata);
    $(this).addClass(classeEvidenzaRigaSelezionata);
    previewMail(this);        
});

then, in the same page, same js file, I've got this javascript:

function selectMail(idMail) {
    var mailTile = $('.mail-tile[data-message-id="' + idMail + '"]')[0];    
    $('.mail-tile').removeClass(classeEvidenzaRigaSelezionata);
    mailTile.addClass(classeEvidenzaRigaSelezionata);
    previewMail(mailTile);
}

In this case, the addClass function doesn't work: "property or method addClass not supported".

classeEvidenzaRigaSelezionata is a global variable.

I can't understand what's the difference between the two snippet. In both case I got an HtmlDivElement to work with (the object is not null). What's going on here?

your are missing semicolon after `mailTile.addClass(classeEvidenzaRigaSelezionata)` — Elen, Apr 27 '12 at 11:02
@kayen: nope, `classeEvidenzaRigaSelezionata` is a global string variable which contains the actual name of the class. Thanks for poiting out. Question updated to be more precise — themarcuz, Apr 27 '12 at 11:04
@Elen: missing semicolon whas just a copy/paste mistake. That's not the error — themarcuz, Apr 27 '12 at 11:07

score 1 · Accepted Answer · answered Apr 27 '12 at 11:04

1

You need to remove the [0] after your ID selector. That would not give you the jQuery element to which you're using addClass(classeEvidenzaRigaSelezionata) later.

Use this instead: var mailTile = $('.mail-tile[data-message-id="' + idMail + '"]');

answered Apr 27 '12 at 11:04

kayen

4,838
3
19
20

You are right. But it doesn't return an array of element in this case? – themarcuz Apr 27 '12 at 11:11
Yes it does, so if you need to access the first element, you'll need to do something like: var mailTile = $('.mail-tile[data-message-id="' + idMail + '"]:first'); – kayen Apr 27 '12 at 11:14
@kayen or better yet `.first()`, although if the array is guaranteed to only have one element there's no need. – Alnitak Apr 27 '12 at 11:15
@Alnitak - Yes, .first() is an alternative but in this case you're constructing a new jQuery object. Ref. http://stackoverflow.com/questions/2312761/jquery-first-vs-first – kayen Apr 27 '12 at 11:23
1

@kayen yes, but creating a new jQuery object is faster than using the non-standard `:first` selector which prevents use of the browser's native `querySelectorAll()` function. See http://api.jquery.com/first-selector/ – Alnitak Apr 27 '12 at 11:45
@Alnitak thanks for the info! So I guess, we can combine our two cases and come up with the fastest and optimal selector using .filter(":first"). Someone actually did a test on these: http://jsperf.com/first-v-first/2 – kayen Apr 27 '12 at 11:50
@kayen no, since `.filter(':first')` is still slower than `.first()` - the former requires parsing the selector, whereas the latter just requires a trivial array operation. – Alnitak Apr 27 '12 at 11:56
@Alnitak - Thanks for creating the test! .first() is fast indeed! – kayen Apr 27 '12 at 12:17

jquery addClass not working: "property or method addClass not supported"

1 Answers1