javascript - 「data-」で始まる要素を選択

Question

「data-」で始まる属性を持つすべての要素をプランjavascriptまたはjQueryで選択するにはどうすればよいですか?

私はもう試した

 $("[data-*"])

しかし、うまくいきません。

Answer 1

必要なことを行う非 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";
});

これが実際の例です