Jump to the content

$.dataメソッドはDOMを書き換えるわけではない

JavaScript

    $.data()メソッドでは、要素のカスタムデータ属性の取得はできるけど属性値の書き換えは出来ない。 $.data()ではjQuery内部にキャッシュされるという挙動を理解していないと、$.data()で属性値を書き換えたつもりでもHTML側に反映されないという問題があり思わぬバグが発生してしまうので要注意。

    HTML

    <div id="c1" data-count="1">1</div>
    <div id="c100" data-count="100">100</div>
    

    Javascript

    
    var $c1 = $('#c1'),
        $c100 = $('#c100');
    
    $c1.data('count', 2);
    
    // data-count属性値は書き換えられず1, jQueryのキャッシュは2
    console.log($c1.data('count') === 2); // true
    console.log($c1.attr('data-count') === 2); // false
    
    

    属性値の書き換えはattr()を使うとうまくいきます。

    参考: jQueryのdata-*属性キャッシュ仕様と対策|Web制作 W3G

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×