Why I can't check if an HTML element (retrieved from the DOM) have set a specific CSS class using JQuery?

Question

I am working on a very old legacy project. On this project is included a very old JQuery version (the 1.2.3 version). I can't change the JQuery version.

I am finding some difficulties to do the following operation.

In my script I have to check if a specific element has certain CSS class setted, so in my code I have something like this:

var theadElement = $(this);

if(theadClass.hasClass('active')) {
    alert("THEAD ACTIVE");
}else {
    alert("THEAD NOT ACTIVE");
}

So the theadElement contain the reference of a thead tag retrieved from my DOM (this works fine) and I have to check if this thead tag have setted a CSS class named active.

I tryied to use the hasClass() function as shown here: Jquery: How to check if the element has certain css class/style

But when it try to performe the hasClass() function it can't work and I obtain the following error message into the FireBug console:

TypeError: theadClass.hasClass is not a function
http://localhost:7001/wea-web/edi.do?serv=8.2
Line 47

So I think that the problem could be that the JQuery 1.2.3 version is too old and the hasClass() function is not implemented in this version.

What can I do to solve this issue in an alternative way? How can I check if the active CSS class is setted on the selected element?

EDIT-1: This is my entire script:

    $(document).ready(function () {
        $("thead.opening").click(function () {

            alert("INTO FIRST FUNCTION !!!");
            //alert($(this).next().css('display'));

            var theadElement = $(this);
            var tbodyElement = $(this).next();

            alert("THEAD TAG BEFORE: " + theadElement.attr('tagName'));
            var theadClass = theadElement.attr('class');
            alert("CLASS THEAD BEFORE: " + theadClass);

            $(this).next().slideToggle('slow', function () {
                $(this).prev("thead.opening").toggleClass("active");
                $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");

                alert("THEAD TAG AFTER: " + theadElement[0].tagName);

                // Retrieve the class of the clicked thead element in the DOM:
                var theadClass = theadElement.attr('class');
                alert("CLASS THEAD AFTER: " + theadClass);

                if(theadClass.attr('class').match(/active/)) {
                    alert("THEAD ACTIVE");
                }
                else {
                    alert("THEAD NOT ACTIVE");
                }
            });
            return false;
        });

Tnx

[hasClass()](https://api.jquery.com/hasClass/) is added in 1.2 so it should available there — Arun P Johny, May 05 '15 at 09:53
@AndreaNobili `if (theadElement.hasClass('active')) { alert("THEAD ACTIVE"); } else { alert("THEAD NOT ACTIVE"); }` — Arun P Johny, May 05 '15 at 10:03

Steve Tomlin · Accepted Answer · 2015-05-05T13:43:34.973

1

Your variable names are different:

theadElement

theadClass

Anyway, you can get the className property of the node in the dom. var hasClass = (threadElement[0].className.search(/(^|\s)myClass(\s|$)/) !== -1)

edited May 05 '15 at 13:43

answered May 05 '15 at 10:00

Steve Tomlin

3,391
3
31
63

score 0 · Answer 2 · answered May 05 '15 at 09:54

0

You can try to use:

theadClass.attr('class').match(/active/)

answered May 05 '15 at 09:54

jcubic

61,973
54
229
402

score 0 · Answer 3 · answered May 05 '15 at 09:56

0

You can skip jQuery altogether and do it using vanilla JS:

if (/\s?active\s?/.test(this.className)) {
    // your code here
}

answered May 05 '15 at 09:56

Victor Stanciu

12,037
3
26
34

score 0 · Answer 4 · answered May 05 '15 at 09:57

0

if(theadClass.attr('class').indexOf('active') !== -1){
    alert("THEAD ACTIVE");
}else {
    alert("THEAD NOT ACTIVE");
}

Are you sure theadClass refers to a jqueryObject? just do threadclass.attr('class'), if you get the proper result then it has a jqueryObject if not you need to look into it as well!

answered May 05 '15 at 09:57

wallop

2,510
1
22
39

I think that this is a JQuery object, I updated my oringinal post adding the entire code of my script so you can see it. Tnx – May 05 '15 at 10:01

score 0 · Answer 5 · answered May 05 '15 at 09:57

0

According to this, hasClass is implemented in JQuery 1.2.3 version...

I think the issue is that you're attempting to call a jQuery function on an object that is no longer a jQuery object.

answered May 05 '15 at 09:57

Brane

3,257
2
42
53

I think that this is a JQuery object, I updated my oringinal post adding the entire code of my script so you can see it. Tnx – May 05 '15 at 10:01
Change this line theadClass.hasClass('active') to -> theadElement.hasClass('active') – Brane May 05 '15 at 10:07

score 0 · Answer 6 · answered May 05 '15 at 10:00

If you don't have the "hasClass" method available, you can always "steal" that method from a newer version of jQuery and implement it in your code.

function (a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(uc," ").indexOf(b)>=0)return!0;return!1}

Is the most recent hasClass implementation and you can extend your jQuery to include it. If you prefer to leave jQuery alone, you can also use a separate function to use however/wherever you wish:

function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

That one above should be pretty browser compatible!

Why I can't check if an HTML element (retrieved from the DOM) have set a specific CSS class using JQuery?

6 Answers6