html内のすべてのカスタムデータ属性の値を取得したい

表題のとおりです。
すべてのデータ属性の値を取得して、
「data1 data2 data3」
と出るようにしたいのですが、「data1」しか表示されず困っています。

html
1<body>
2 <div class="box" data-type="data1">テスト1</div>
3<div class="box" data-type="data2">テスト2</div>
4<div class="box" data-type="data3">テスト3</div>
5</body>

jQuery
1$(function () {
2    var num = $("div").data("type");
3    console.log(num);
4});
5

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScript
1$(function () {
2    var num = $("div[data-type]").map(function(i, ele){ return $(ele).data("type"); }).get();
3    console.log(num);
4});
5```**動くサンプル：**[https://jsfiddle.net/ua1bbkwd/](https://jsfiddle.net/ua1bbkwd/)
6
7---
8
9【【jQuery】複数の要素・配列に対して処理をするmapの使い方 - TASK NOTES】
10[http://www.task-notes.com/entry/20141019/1413717129](http://www.task-notes.com/entry/20141019/1413717129)

投稿2018/02/22 16:32

kei344

総合スコア69407

xyunow

2018/02/23 15:38

ありがとうございます！動くサンプルや解説ページをつけてくださって、とてもたすかりました。

行動規範の内容に同意します

一応「すべての」を拾ってみます

javascript
1$(function(){
2  console.log($('*').filter(function(){
3    return Object.keys($(this).data()).length>0;
4  }).map(function(){
5    return $(this).data();
6  }).get());
7});

HTML
1<body>
2<div class="box" data-type="data1">テスト1</div>
3<div class="box" data-type="data2">テスト2</div>
4<div class="box" data-type="data3">テスト3</div>
5<div class="box" data-hoge="data4">テスト4</div>
6<div class="box" data-hoge="data5">テスト5</div>
7<div class="box" data-fuga="data6">テスト6</div>
8</body>