如何检查属性值

How to check for attribute value

本文关键字：属性 检查 何检查      更新时间：2023-09-26

请告知我是否在这里使用了正确的语法来检查"aria-expanded"是否适用于css class"classname"的特定元素集：

    if ($(‘.classname’).hasAttribute('aria-expanded','true')) {
 output here
}
jQuery没有hasAttribute方法，所以我假设$ = docuument.querySelector。（注意：不是document.querySelectorAll；所以，您只考虑一个元素）。

hasAttribute方法采用一个参数：您要检查的属性的名称。要检查该属性的值，需要使用getAttribute，然后进行比较。所以你可以这样做：

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

如果您使用的是jQuery，那么您可以使用attr方法：

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

另请参阅hasAttribute的MDN文档。

如果你试图检查一组元素，你可以这样做：

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示例：http://jsbin.com/payaqijeqa/edit?js，控制台

  1. jQuery没有.hasAttribute功能

  2. 如果真的这样做了，它很可能只对第一个有效

下面使用本机JavaScript（ES5）检查集合document.querySelectorAll('.classname')中的.every元素是否将该属性设置为true。

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

注意：以上测试区分大小写。它还会忽略任何根本没有该属性的元素。如果后者是一个问题：

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

您可以检查类为"className"的每个元素是否都具有属性"aria-expanded='true'"，带有：

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

CSS具有属性选择器，允许选择具有特定属性的元素。如果您否定选择器（它是jQuery唯一的），您可以使用测试是否有任何元素具有类但没有属性值

$(".className[aria-expanded!='true']").length == 0
相关文章：