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);

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

您还可以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);
});

Answer 2

您也可以使用普通的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)));
    }
}

将Data属性添加到元素并从string中动态添加值

2 个答案: