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
}
-
you want to check whether it's true for all of that set ?Alnitak– Alnitak2016-05-09 21:22:30 +00:00Commented 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– Felix Kling2016-05-09 21:24:32 +00:00Commented May 9, 2016 at 21:24
-
Possible duplicate of jQuery hasAttr checking to see if there is an attribute on an elementSarath Chandra– Sarath Chandra2016-05-09 21:25:37 +00:00Commented May 9, 2016 at 21:25
-
are you sure 'aria-expanded' is an attribute? maybe it's another classMojtaba– Mojtaba2016-05-09 21:34:32 +00:00Commented May 9, 2016 at 21:34
Add a comment
|
4 Answers
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
6 Comments
Nav
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. <button aria-expanded="false" type="button" class=“classname” data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="glyphicon glyphicon-menu-hamburger"></span> </button>
Andrew Burgess
@nav What is
$ in your application?Nav
Its the js syntax, not sure if I get what you're asking
Nav
$(‘.classname’).find('button.classname’).on('click', function () { if( $(‘.classname’).getAttribute('aria-expanded') === 'true') { //ouput } });
Andrew Burgess
@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" |
jQuery doesn't have a
.hasAttributefunctionIf 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';
});
Comments
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
}
Comments
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
