javascript - 将数据属性添加到元素并从字符串动态添加值

Question

是否可以为下面的元素分配一个数据值 - 并使用字符串中的数字作为 jQuery/Vanilla JS 的值？

我想要这个:

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

看起来像这样:

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

值是动态的——元素的类是相同的。

Answer 1

这可以用 jQuery 来完成 attr()方法:

var someValue = 2560;
$('.priceinfo.col5').attr('data-price', someValue);

您可以使用 attr() 设置任何属性，包括自定义属性，例如 HTML5 data- 属性。

---

您也可以pass a function而不是 .attr() 的固定值:

$('.priceinfo.col5').attr('data-price', function() {
    var text = $(this).text();
    return parseInt(text, 10); //drops the non-numeric characters at the end of the text
});

当 jQuery 集合中有多个元素时，这非常有用——多个元素具有 priceinfo 和 col5 类。

---

如果该值有时可能包含初始非数字字符，那么您可以使用 regular expression解析文本:

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