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

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

1189

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

86,676
24
133
174

28

It would probably be better to do something like: if( typeof( $(this).attr('name') ) != 'undefined' ) { // ... } since undefined can actually be redefined using a simple: undefined = 1 – Shane Tomlinson Nov 22 '10 at 12:34
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
I think we use `||` instead of `&&` – Pyjcoder Apr 08 '22 at 12:36

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

681

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

105,522
40
210
262

score 155 · 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 89 · Answer 5 · edited Jan 30 '21 at 07:22

89

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

Refer This

edited Jan 30 '21 at 07:22

jakubde

27
2
4

answered Jan 03 '12 at 22:59

Domenic

105,522
40
210
262

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 22 · Answer 6 · edited Jun 27 '10 at 18:52

22

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,030
21
100
124

answered May 25 '10 at 08:23

JamesM-SiteGen

804
2
11
25

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,207
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