jQuery hasAttr checking to see if there is an attribute on an element

Question

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")) {
    // ...
}

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" — jave.web, Jul 09 '15 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)); }; — Spider IT, Sep 04 '22 at 10:05

strager · Accepted Answer · 2021-03-15T19:34:23.560

1247

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) {
    // ...
}

edited Mar 15 '21 at 19:34

answered Aug 23 '09 at 08:42

strager

88,763
26
134
176

37

@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. – strager Feb 04 '11 at 01:15
4

I think we use `||` instead of `&&` – Pyjcoder Apr 08 '22 at 12:36
@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 – Roe May 11 '23 at 13:53

score 702 · Answer 2 · answered Jan 11 '11 at 19:59

702

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.

answered Jan 11 '11 at 19:59

Domenic

110,262
41
219
271

1

How about speed comparison for this method and `.attr`? – Eugen Konkov Dec 29 '22 at 21:56

score 162 · Answer 3 · answered Aug 23 '09 at 09:11

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>

Tristan Warner-Smith · Answer 4 · 2012-04-17T13:38:59.383

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>

if the name attr is present but empty string, the attribute would exist but the test would fail. — lambacck, Jun 12 '10 at 04:01

score 98 · Answer 5 · edited Jan 30 '21 at 07:22

98

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

Refer This

edited Jan 30 '21 at 07:22

jakubde

31
1
2
4

answered Jan 03 '12 at 22:59

Domenic

110,262
41
219
271

19

or if you don't care that it won't work in a lot of older browsers and IE – Aaron Luman Mar 30 '12 at 20:32

score 23 · Answer 6 · edited Jun 27 '10 at 18:52

23

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.

edited Jun 27 '10 at 18:52

Peter Mortensen

30,738
21
105
131

answered May 25 '10 at 08:23

JamesM-SiteGen

802
2
11
26

score 7 · Answer 7 · answered Sep 23 '11 at 15:03

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.

score 5 · Answer 8 · answered Aug 11 '10 at 13:37

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.

bmarti44 · Answer 9 · 2013-02-08T14:34:35.767

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.

edited Feb 08 '13 at 14:34

answered Aug 23 '11 at 17:40

bmarti44

1,247
2
14
22

Funny that those links don't work in IE 8, but do in Chrome... – vapcguy Mar 13 '15 at 02:52

jQuery hasAttr checking to see if there is an attribute on an element

9 Answers9

Linked

Related