要素にデータ属性を追加し、文字列から動的に値を追加する

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()に固定された値のことができます：jQueryのセット内に複数の要素がある場合

$('.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 
}); 

これは非常に便利です - クラス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))); 
    } 
}