Avíseme si estoy usando la sintaxis correcta aquí para verificar si "aria-expandido" es verdadero para un conjunto particular de elementos con la clase css "classname":

    if ($(‘.classname’).hasAttribute('aria-expanded','true')) {
 output here
}
1
Nav 10 may. 2016 a las 00:20

4 respuestas

La mejor respuesta

JQuery no tiene un método hasAttribute, por lo que supongo que $ = docuument.querySelector. (Nota: no document.querySelectorAll; por lo tanto, solo está considerando un solo elemento).

El método hasAttribute toma un solo parámetro: el nombre del atributo que está buscando. Para verificar el valor de ese atributo, deberá usar getAttribute y luego compararlo. Entonces podrías hacer:

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

Si está utilizando jQuery, puede utilizar el método attr:

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

Consulte también el documentos MDN para hasAttribute.

Si está intentando verificar un conjunto de elementos, podría hacer algo como esto:

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
}

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

3
Andrew Burgess 9 may. 2016 a las 21:53
  1. jQuery no tiene una función .hasAttribute

  2. Si lo hiciera, lo más probable es que solo funcione en el primer set

Lo siguiente utiliza JavaScript nativo (ES5) para verificar que el elemento .every en el conjunto document.querySelectorAll('.classname') tiene ese atributo establecido en true.

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

NB: la prueba anterior distingue entre mayúsculas y minúsculas. También ignora cualquier elemento que no tenga ese atributo en absoluto. Si esto último es un problema:

let allSet = [].every.call(document.querySelectorAll('.classname'), function(el) {
    return el.hasAttribute('aria-expanded') && el.getAttribute('aria-expanded') === 'true';
});
0
Alnitak 9 may. 2016 a las 21:34

CSS tiene selectores de atributos que permiten la selección de elementos con ciertos atributos. Si niega el selector (que es exclusivo de jQuery), puede probar si hay elementos que tienen la clase pero no tienen el valor de atributo utilizando:

$(".className[aria-expanded!='true']").length == 0
0
4castle 21 may. 2016 a las 18:08

Puede verificar si cada elemento con la clase "className" tiene el atributo "aria-expandido = 'true'" con:

if( $(".className").length === $(".className").filter("[aria-expanded='true']").length) {
     //output here
}
0
JellyRaptor 9 may. 2016 a las 21:35