JQuery $ .children（）および$ .each（）を使用してdata- *要素を反復処理しますか？

Question

HTMLコードを繰り返し処理し、 "data-"属性を持つすべての要素を選択し、その値を収集したいと考えています。私はウェブを見て、特定のデータ（要素）のデータを収集する方法しか見つけられませんでした。私は要素名を知らずにdata- *値を取得する必要があるので、.children（）jqueryメソッドが見つかりました。しかし、私はそれをすべて一緒に実装する方法を知らない。

HTML：：

<div data-example="master"> 
    <div data-example="i"> 
     <div data-example="a"> 
      <span data-example="1"></span> 
     </div> 
     <div data-example="b"> 
      <span data-example="2"></span> 
     </div> 
    </div> 
    <div data-example="ii"> 
     <div data-example="c"> 
      <span data-example="3"></span> 
     </div> 
     <div data-example="d"> 
      <span data-example="4"></span> 
     </div> 
    </div> 
</div> 

はJavaScript：

var master = []; 
$("#master").children(function() { 
    var element = $(this); 
    var data = element.data('example'); 
    master.push(data); 
} 

をので、この特定の例のために、私は私のエンドゲームをしたい。ここ

は私がやっているの簡単な例ですマスター配列を[i、a、1、b、2、ii、c、3、d、4]と等しくする。

しかし、私はJQueryイベントをトリガするときに何も起こっていないので、正しく実行していません。

Answer 1

Attribute selectorを使用し、Array.prototype.mapを適用してください。

console.log(Array.from($('[data-example]')).map(function(elem) { 
 
    return $(elem).data('example'); 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-example="master"> 
 
    <div data-example="i"> 
 
    <div data-example="a"> 
 
     <span data-example="1"></span> 
 
    </div> 
 
    <div data-example="b"> 
 
     <span data-example="2"></span> 
 
    </div> 
 
    </div> 
 
    <div data-example="ii"> 
 
    <div data-example="c"> 
 
     <span data-example="3"></span> 
 
    </div> 
 
    <div data-example="d"> 
 
     <span data-example="4"></span> 
 
    </div> 
 
    </div> 
 
</div>