选择以“data-”开头的元素

时间:2013-09-04 09:59:51

标签: javascript jquery css

如何使用计划javascript或jQuery选择每个具有以“data - ”开头的属性的元素?

我试过

 $("[data-*"])

但它不起作用。

1 个答案:

答案 0 :(得分:5)

这是一个非JQuery函数,可以满足您的需求:

function getAllDataElements() {
    //get all DOM elements
    var elements = document.getElementsByTagName("*");
    //array to store matches
    var matches = [];
    //loop each element
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        //get all attributes for the element and loop them
        var attributes = element.attributes;
        for (var j = 0; j < attributes.length; j++) {
            //get the name of the attribute
            var attr = attributes.item(j).nodeName;
            //check if attibute name starts with "data-"
            if (attr.indexOf("data-") == 0) {
                matches.push(element); //add it to matches
            }
        }
    }
    return matches; //return results
}

可以这样使用:

var results = getAllDataElements();

results.forEach(function (i) {
    i.style.color = "#FF0000";
});

Here is a working example