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
}

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
}

• javascript
• jquery

• you want to check whether it's true for all of that set ? – Alnitak Commented May 9, 2016 at 21:22
• It his jQuery? Because if it is, then it's incorrect. jQuery doesn't have such as method: api.jquery.com/?s=hasAttribute . – Felix Kling Commented May 9, 2016 at 21:24
• Possible duplicate of jQuery hasAttr checking to see if there is an attribute on an element – Sarath Chandra Commented May 9, 2016 at 21:25
• are you sure 'aria-expanded' is an attribute? maybe it's another class – Mojtaba Commented May 9, 2016 at 21:34

4 Answers 4

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

1. jQuery doesn't have a .hasAttribute function

2. 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';
});

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
}

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