Question

I have the following function:

function updateStatuses() {
    $.each($('.status-badge'), function (i, value) {
        value.removeClass('badge-known');
    });
    $.post("/Diagnostics/Update", {  }, function(data) {
        $.each(data, function() {
            setStatus(this.Id, this.Infos, this.Errors, this.Warnings);
        });
    });
    window.setTimeout(function () {
        $.each($('.status-badge:not(.badge-known)'), function(i, value) {
            value.addClass('badge-unknown');
        });
    }, 1000);
}

Basically, I’m updating a group of badges from an AJAX call. If, after 1000ms, any certain badge hasn’t been updated, it gains the badge-unknown class.

The function above is called as such:

$(function () { updateStatuses(); });

My problem is that value.removeClass('badge-known'); gives the following error:

TypeError: value.removeClass is not a function

If I comment that line out, the timeout function throws the same error on value.removeClass('badge-unknown');

The confusing thing is, addClass and removeClass are used in setStatus, which is defined just below the above function. What am I doing wrong here?

Answer 1

value is a dom node, not a jQuery object. Try

$(value).removeClass('badge-known');