Question

Aloha,

I found an answer to my question here. Basically i’m looking to tell if a tag has an attribute. I don’t care what the value is, just if there is one.

I’m currently using:

$.fn.hasAttr = function (attr) {
    var attribVal = this.attr(attr);
    alert(attr+" ["+attribVal+"]");
    return (attribVal !== undefined) && (attribVal !== false);
};

This function is not working in Opera or Webkit. It returns true even if the attribute does not exist. The alert that I added shows that the attribVal is equal to blank, not false, not undefined, not null, but blank. Firefox and IE this works fine in as attribVal is undefined.

The problem is I want it to return true for a blank attribute, if its on the tag and false for no attribute on the tag.

Edit:
expected results…

<tag />                    should be hasAttr('placeholder') = false
<tag placeholder />        should be hasAttr('placeholder') = true
<tag placeholder="" />     should be hasAttr('placeholder') = true
<tag placeholder="Hi" />   should be hasAttr('placeholder') = true

Edit: Current code

This works in WebKit and FF, not in IE or Opera.

Update After all this, my original code works, unless I am looking at the placeholder attribute. Opera and webkit return true for all four options when I’m looking at the placeholder attribute. See here for an example. I’ve updated my expected results to use the placeholder attribute.

Answer 1

This should work in all browsers:

 $.fn.hasAttr = function (attr) {
     for (var i = 0; i < this[0].attributes.length; i++) {
         if (this[0].attributes[i].nodeName == attr) {return true}
     }
    return false;
 };