Javascript 向元素添加数据属性，并从字符串中动态添加值

是否可以为下面的元素指定一个数据值，并使用字符串中的数字作为jQuery/JS的值

我想要这个：

<div class="priceinfo col5">2560kr</div>

2560kr

看起来像这样：

<div class="priceinfo col5" data-price="2560">2560kr</div>

2560kr

---

值是动态的-元素的类是相同的

这可以通过jQuery方法完成：

您可以使用

attr（）

设置任何属性，包括自定义属性，如HTML5

data-

属性

---

您也可以将固定值改为

.attr（）

：

当jQuery集中有多个元素时，这非常有用——多个元素具有类

priceinfo

和

col5

---

如果该值有时可能具有非数字的初始字符，则可以使用来解析文本：

$('.priceinfo.col5').attr('data-price', function() {
    var text = $(this).text();
    var matches = /\d+/.exec(text);
    if (!matches) {return '';}
    return parseInt(matches[0], 10);
});

---

您也可以使用纯javascript实现这一点：

function setAttribute(selector, attribute, value) {
    var elements = document.querySelectorAll(selector);
    for (var index = 0; index < elements.length; index++) {
        elements[index].setAttribute(attribute, (typeof value === "function" ? value(elements[index] : value)));
    }
}

函数setAttribute（选择器、属性、值）{
var元素=document.querySelectorAll（选择器）；
对于（var索引=0；索引

嗨！我想从元素中的字符串创建数据值。由于这是一个动态数字，我无法用脚本自己设置值。@Zev Spitz我刚刚意识到一种情况，在字符串中的数字之前会有一个非数字字符-是否也可以解释这个问题？@Zev Spitz谢谢-效果很好。我注意到另外两种情况使得脚本无法工作——在一个例子中，中间有逗号。这使得数据价格仅为逗号前的数字。第二个实例中，其中一个重复元素只有文本，没有数字。只有文本的元素使脚本无法处理包含数字的元素。第一个我可以避免的，没有逗号。但是第二天我不能。有什么办法可以解释吗？@JerrySvensson RE commas，你可以让正则表达式更复杂，用逗号和小数分隔符，或者你可以找到一个。RE empty text--空值可以被视为0吗？@Zev Spitz似乎不能被视为0-您上一个代码段给了我以下信息：TypeError:无法读取null的属性“0”

$('.priceinfo.col5').attr('data-price', function() {
    var text = $(this).text();
    var matches = /\d+/.exec(text);
    if (!matches) {return '';}
    return parseInt(matches[0], 10);
});

function setAttribute(selector, attribute, value) {
    var elements = document.querySelectorAll(selector);
    for (var index = 0; index < elements.length; index++) {
        elements[index].setAttribute(attribute, (typeof value === "function" ? value(elements[index] : value)));
    }
}