Wie für Attributwert überprüfen

Question

mir bitte mitteilen, ob ich hier richtig Syntax bin zu überprüfen, ob „aria-expanded“ für einen bestimmten Satz von Elementen mit CSS-Klasse „Klassennamen“ wahr ist:

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

Answer 1

jQuery hat keine hasAttribute Methode, so gehe ich davon aus $ = docuument.querySelector. (Hinweis: nicht document.querySelectorAll; Sie denken also nur an ein einzelnes Element). Die Methode hasAttribute verwendet einen einzelnen Parameter: den Namen des Attributs, nach dem Sie suchen. Um den Wert dieses Attributs zu überprüfen, müssen Sie getAttribute verwenden und das dann vergleichen. So könnten Sie tun:

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

Wenn Sie jQuery verwenden, dann können Sie nur die attr Methode verwenden:

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

Siehe auch die MDN docs for hasAttribute.

Wenn Sie versuchen, eine Reihe von Elementen zu überprüfen, könnten Sie so etwas tun:

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 Beispiel: http://jsbin.com/payaqijeqa/edit?js,console

Answer 2

1. jQuery hat keine .hasAttribute Funktion

2. Wenn ja, wäre es höchstwahrscheinlich nur auf dem ersten des Satzes arbeiten

Im Folgenden wird natives JavaScript (ES5) verwendet, um zu überprüfen, ob das Element .every im Set document.querySelectorAll('.classname') dieses Attribut auf true festgelegt hat.

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

Hinweis: Bei dem obigen Test wird die Groß- und Kleinschreibung beachtet. Es ignoriert auch alle Elemente, die dieses Attribut überhaupt nicht haben. Wenn letzteres ist ein Thema:

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

Answer 3

Sie können prüfen, ob jedes Element mit Klasse „classname "hat das Attribut" aria-expanded = 'true' "mit:

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

Answer 4

CSS verfügt über Attributselektoren, die die Auswahl von Elementen mit bestimmten Attributen ermöglichen. Wenn Sie den Wähler negieren (die jQuery einzigartig ist), können Sie testen, ob es irgendwelche Elemente sind, die die Klasse haben, aber nicht über den Attributwert unter Verwendung:

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