Checking Attribute Status with JQuery

Get Element’s Attribute Value or Status

With JQuery, you can do this $(‘#your-element’).hasClass(‘a-class’) to check if the element has a certain class. The problem is that you have to know the class name ahead of time when you use .hasClass. I wanted a general way to know if the class attribute actually exists on the element so I created the getAttrStat function for JQuery to see if the attribute in question on the element is undefined, empty, or has a value without knowing the attribute value ahead of time.

Function to Get Attribute Status
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//the return codes are arbitrary
function getAttrStat(elem, attr) {
var attrValue = null,
attrStatus = (attrValue = elem.attr(attr)) || 0;
if (attrStatus === 0) {
if (attrValue === "") {
//attr is empty
console.log(elem.selector + " '" + attr + "' is empty.");
return 1;
} else if (typeof attrValue == "undefined")
//attr is undefined
console.log(elem.selector + " '" + attr + "' is undefined.");
return 0;
} else {
//attr has a value
console.log(elem.selector + " '" + attr + "' has a value: " + attrValue);
return 2;
}
}
Usage of Function
1
2
3
4
5
6
7
8
//returns 0 and logs #a-id 'class' is undefined.
getAttrStat($('#a-id'), "class")

//returns 1 and logs #b-id 'class' is undefined.
getAttrStat($('#b-id'), "class")

//returns 2 and logs #c-id 'class' is undefined.
getAttrStat($('#c-id'), "class")
Divs with Attributes
1
2
3
<div id="a-id"></div>
<div class="" id="b-id"></div>
<div class="c-class" id="c-id"></div>

Demo