How to check for attribute value

Question

Please advise me if I am using correct syntax here for checking if “aria-expanded” is true for a particular set of elements with css class “classname”:

    if ($(‘.classname’).hasAttribute('aria-expanded','true')) {  output here }

It his jQuery? Because if it is, then it's incorrect. jQuery doesn't have such as method: https://api.jquery.com/?s=hasAttribute . — Felix Kling, May 09 '16 at 21:24
Possible duplicate of [jQuery hasAttr checking to see if there is an attribute on an element](http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element) — Sarath Chandra, May 09 '16 at 21:25
are you sure 'aria-expanded' is an attribute? maybe it's another class — Mojtaba, May 09 '16 at 21:34

Andrew Burgess · Accepted Answer · 2016-05-09T21:53:11.460

9

jQuery doesn't have a hasAttribute method, so I'm assuming $ = docuument.querySelector. (Note: not document.querySelectorAll; so, you're only considering a single element).

The hasAttribute method takes a single parameter: the name of the attribute you are checking for. To check that attribute's value, you'll need to use getAttribute and then compare that. So you might do:

if( $('.classname').getAttribute('aria-expanded') === 'true') {}

If you are using jQuery, then you can just use the attr method:

if ($('.classname').attr('aria-expanded') === 'true') {}

See also the MDN docs for hasAttribute.

If you're trying to check a set of elements, you could do something like this:

function allHaveAttribute(elements, attrName, attrValue) {
    // First, check that all elements have the attribute
    for (var i = 0; i < elements.length; i++) {
        if (!elements[i].hasAttribute(attrName)) return false;
    }

    if (attrValue) { // if we're checking their value...
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].getAttribute(attrName) !== attrValue)
                return false;
        }
        return true;
    } else { // we know all elements have the attribute
        return true;
    }
}

var els = document.querySelectorAll('.classname');

if (allHaveAttribute(els, 'aria-expanded', 'true') {
    // action here
}

JSBin Example: http://jsbin.com/payaqijeqa/edit?js,console

edited May 09 '16 at 21:53

answered May 09 '16 at 21:25

Andrew Burgess

1,765
17
19

thanks for your reply @andrewburgess, I used your suggestion as following but still not working, can you please have a look again: if( $(‘.classname’).getAttribute('aria-expanded') === 'true') {  //ouput here } Following is the element I am applying it on click. – Nav May 09 '16 at 21:44
@nav What is `$` in your application? – Andrew Burgess May 09 '16 at 21:46
Its the js syntax, not sure if I get what you're asking – Nav May 09 '16 at 21:48
$(‘.classname’).find('button.classname’).on('click', function () {  if( $(‘.classname’).getAttribute('aria-expanded') === 'true') {  //ouput  } }); – Nav May 09 '16 at 21:49
@nav JavaScript does not have anything assigned to `$` by default. Usually, jQuery is assigned to `$`. If you're not using jQuery, try switching it to `if (document.querySelector('.classname').getAttribute('aria-expanded') === "true") { }` If you are using jQuery, you need to "unwrap" the element: `$('.classname').get(0).getAttribute('aria-expanded') === "true"` Or, just use `attr` to get the value `$('.classname').attr('aria-expanded') === "true"` – Andrew Burgess May 09 '16 at 21:50
$('.classname').attr('aria-expanded') === "true" worked perfectly, Thanks a bunch – Nav May 09 '16 at 22:01

Alnitak · Answer 2 · 2016-05-09T21:34:00.247

jQuery doesn't have a .hasAttribute function
If it did, it would most likely only work on the first of the set

The following uses native JavaScript (ES5) to check that .every element in the set document.querySelectorAll('.classname') has that attribute set to true.

let allSet = [].every.call(document.querySelectorAll('.classname'), function(el) {
    return el.getAttribute('aria-expanded') === 'true';
});

NB: the above test is case sensitive. It also ignore any elements that don't have that attribute at all. If the latter is an issue:

let allSet = [].every.call(document.querySelectorAll('.classname'), function(el) {
    return el.hasAttribute('aria-expanded') && el.getAttribute('aria-expanded') === 'true';
});

score 0 · Answer 3 · answered May 09 '16 at 21:35

0

You can check to see if every element with class "className" has the attribute "aria-expanded='true'" with:

if( $(".className").length === $(".className").filter("[aria-expanded='true']").length) {
     //output here
}

answered May 09 '16 at 21:35

JellyRaptor

725
1
8
20

score 0 · Answer 4 · answered May 21 '16 at 18:08

CSS has attribute selectors that allow selection of elements with certain attributes. If you negate the selector (which is unique to jQuery), you can test if there are any elements that have the class but don't have the attribute value by using:

$(".className[aria-expanded!='true']").length == 0

How to check for attribute value

4 Answers4