Q&AjQuery 1.12.4 で、要素に data() を使って値を与えました。
console.log() で見る限り正しく値を持っているようですが、
実際に「data-」という属性が付けられているわけではないので
セレクタで [data-sample="〜"] と指定しても取得できません。
for と hasData() を使えば無理やり取得する事はできますが
このようなケースではどうやって特定のdataの値を持つ要素を選択するのでしょうか？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function(){ $('#test li').first().data('sample', 'hello'); var elem = $('#test li[data-sample="hello"]'); console.log(elem.length); // 0 }); </script> </head> <body> <ul id="test"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
回答3件
0
jQueryのdataは内部的なキャッシュを用いていて、HTMLの方には反映されません。
http://api.jquery.com/data/#data-html5
The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).
attrやセレクタで用いたい場合は、attrでセットするか、ネイティブJSのdatasetやsetAttributeでセットする必要があります。
javascript
1$('#test li').first().attr('data-sample', 'hello'); 2$('#test li').first()[0].setAttribute('data-sample', 'hello'); 3$('#test li').first()[0].dataset.dataSample = 'hello';
投稿2016/08/22 09:30
総合スコア2604
0
なぜdataを利用したいのですか？
attrで設定するのはダメなのでしょうか？
javascript
1$('#test li').first().attr('data-sample', 'hello'); 2console.log($('#test li[data-sample=hello]').html());
投稿2016/08/22 09:13
総合スコア114757
0
自己解決
セレクタで行わずに filter() を使うことで解決しました。
$('#test li').filter(function(){ return ( $(this).hasData('sample') && $(this).data('sample') === 'hello' ); }).length;
投稿2016/08/24 07:47
総合スコア158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。