【jQuery】dataメソッドではDOMのdata属性は変わらない

jQueryJavaScript

こんにちは。いっとくです!

Vue.jsやReact.jsがメインストリームになっている中、相変わらずjQueryばっかり使ってます。生粋のクエリストです。クエルしようぜ!つってね。

いうて、今もjQueryを使っているところって結構あると思うんだ。別に現状に不満も不足もないし、ビジネスの収益性に影響を及ぼさないのであれば、それでいいと思うんだ。

JSに関する話題でこんな発言をしたら、全方位からロケットパンチでも飛んできそうで恐ろしいですが、今回はjQueryのdataメソッドにまつわる体験談。

dataメソッドで値を書き換えたのに、DOM上で数値が変わっていなかったよ!という怖いお話です。

スポンサーリンク

jQueryのdataメソッドで書き換えているのは要素の値ではない

僕が結構よく使うjQueryのメソッドの一つにdataというものがあります。

これはHTMLタグのデータ属性を取得したり、変更したりする便利なメソッドです。

data属性を使えば割と自由にタグに値を付与できるので、とにかく力技で問題を解決したいときによく使います。

ということで実例!

まずはこんなHTMLがありましたとさ。

<input id="input_text" type="text" name="shop" data-area="jp">

data属性は「data-」の接頭辞 + 任意の命名をし、その中に値を格納することができます。

まずは、このdata属性の値をjQueryで取得。

$('#input_text').data('area'); // 'jp'

シンプルですね。大好き。

じゃあ次はdata属性を書き換えるぞ!

値を書き換える場合はdateメソッドの第二引数にセットしたい値をいれてあげればOKです。

$('#input_text').data('area', 'us');

$('#input_text').data('area') // 'us'

うん、バッチリ書き換わってるね!

ってことで、HTMLを見てみると…

<input id="input_text" type="text" name="shop" data-area="jp">

…jpのままじゃん!!

どうやらjQueryのdataメソッドは、HTMLタグの値を直接書き換えるのではなく、jQueryオブジェクトが持っている値を変えているだけっぽい!

ということなので、実際にDOMまで書き換えたいという場合は、attrメソッドを使いましょう

使い方はこの通り

$('#input_text').attr('data-area', 'us');

console.log($('#input_text').data('area')); // 'us'

すると、dataで取得してもusに変更されているし、、、

<input id="input_text" type="text" name="shop" data-area="us">

DOMの要素もしっかり書き換わっています!

ということなので、もしDOMの要素も合わせて書き換えないと動かないよ!って時はattrメソッドを使うようにしましょ〜

以上、いっとくでした!

おしまい

コメント

タイトルとURLをコピーしました