821

How do you check if there is an attribute on an element in jQuery? Similar to hasClass, but with attr?

For example, 

if ($(this).hasAttr("name")) {
    // ...
}
Improve this question
2
  • 16
    quickie: if( $(this).is('[ATTRIBUTE_NAME]') ) { /* ... */ } BTW: this is not a duplicate of that question anymore, is just a similar question regarding different problem, the linked duplicate is now called "Select elements by attribute" Commented Jul 9, 2015 at 20:01
  • jQuery has no .hasAttr() function, but it is easy to implement: jQuery.prototype.hasAttr = function(attribute) { var a = $(this).attr(attribute); return ((typeof a !== "undefined") && (a !== false)); }; Commented Sep 4, 2022 at 10:05

9 Answers 9

Reset to default
1281 
var attr = $(this).attr('name');

// For some browsers, `attr` is undefined; for others,
// `attr` is false.  Check for both.
if (typeof attr !== 'undefined' && attr !== false) {
    // ...
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@FuzzyDunlop, Yes, but if attr is "" that would return false as well. It should be true, because an empty attribute is a valid attribute. Also, there's no need for a double-not because if casts it down to bool anyway.
I think we use || instead of &&
@Pyjcoder In this case the use of && is correct. If the attribute is not undefined AND not false it should continue in the if statement. If either condition ends up false it should skip over the if. In the case where you invert the code (possibly for returning or error handling) you would need to use || since you would want to catch only if either condition is matched
@Pyjcoder The use of && in this instance is correct. For example, If you use || and the attr is false, the first check in the condition (attr !== 'undefined') would have a logical result of true, thus the if statement would short-circuit and bypass to run the lines of code inside the first condition, resulting in a unintended output.
jQuery documentation says As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. Is checking for false still relevant?
718

How about just $(this).is("[name]")?

The [attr] syntax is the CSS selector for an element with an attribute attr, and .is() checks if the element it is called on matches the given CSS selector.

Improve this answer

1 Comment

How about speed comparison for this method and .attr?
165

If you will be checking the existence of attributes frequently, I would suggest creating a hasAttr function, to use as you hypothesized in your question:

$.fn.hasAttr = function(name) {  
   return this.attr(name) !== undefined;
};

$(document).ready(function() {
    if($('.edit').hasAttr('id')) {
        alert('true');
    } else {
        alert('false');
    }
});

<div class="edit" id="div_1">Test field</div>
Improve this answer

Comments

132

You're so close it's crazy.

if($(this).attr("name"))

There's no hasAttr but hitting an attribute by name will just return undefined if it doesn't exist.

This is why the below works. If you remove the name attribute from #heading the second alert will fire.

Update: As per the comments, the below will ONLY work if the attribute is present AND is set to something not if the attribute is there but empty

<script type="text/javascript">
$(document).ready(function()
{
    if ($("#heading").attr("name"))
      alert('Look, this is showing because it\'s not undefined');
    else
      alert('This would be called if it were undefined or is there but empty');
});
</script>
<h1 id="heading" name="bob">Welcome!</h1>
Improve this answer

1 Comment

if the name attr is present but empty string, the attribute would exist but the test would fail.
101

Late to the party, but... why not just this.hasAttribute("name")?

Refer This

Improve this answer

2 Comments

or if you don't care that it won't work in a lot of older browsers and IE
Btw, these days hasAttribute is totally safe to use caniuse.com/mdn-api_element_hasattribute
24

The best way to do this would be with filter():

$("nav>ul>li>a").filter("[data-page-id]");

It would still be nice to have .hasAttr(), but as it doesn't exist there is this way.

Improve this answer

Comments

7 
Object.prototype.hasAttr = function(attr) {
    if(this.attr) {
        var _attr = this.attr(attr);
    } else {
        var _attr = this.getAttribute(attr);
    }
    return (typeof _attr !== "undefined" && _attr !== false && _attr !== null);      
};

I came a crossed this while writing my own function to do the same thing... I though I'd share in case someone else stumbles here. I added null because getAttribute() will return null if the attribute does not exist.

This method will allow you to check jQuery objects and regular javascript objects.

Improve this answer

Comments

5

You can also use it with attributes such as disabled="disabled" on the form fields etc. like so:

$("#change_password").click(function() {
    var target = $(this).attr("rel");
    if($("#" + target).attr("disabled")) {
        $("#" + target).attr("disabled", false);
    } else {
        $("#" + target).attr("disabled", true);
    }
});

The "rel" attribute stores the id of the target input field.

Improve this answer

Comments

5

I wrote a hasAttr() plugin for jquery that will do all of this very simply, exactly as the OP has requested. More information here

EDIT: My plugin was deleted in the great plugins.jquery.com database deletion disaster of 2010. You can look here for some info on adding it yourself, and why it hasn't been added.

Improve this answer

1 Comment

Funny that those links don't work in IE 8, but do in Chrome...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.