Iterieren durch Daten - * Elemente mit JQuery $ .children() und $ .Each()?

Question

Ich möchte in der Lage sein, durch meinen HTML-Code zu iterieren und jedes Element auszuwählen, das das "data-" -Attribut enthält und seinen Wert sammelt. Ich habe im Internet nachgesehen und nur Wege gefunden, Daten zu bestimmten Daten zu sammeln - Elemente. Ich muss den Wert von data- * erhalten, ohne den Namen des Elements zu kennen, und so habe ich die jquery-Methode .children() gefunden. Ich weiß jedoch nicht, wie ich alles zusammen umsetzen soll.

Hier ist ein kleines Beispiel von dem, was ich tue:

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); 
} 

So für dieses Beispiel, ich möchte, dass meine End-Spiel habe das Master-Array gleich [i, a, 1, b, 2, ii, c, 3, d, 4].

Aber ich mache es nicht richtig, weil nichts passiert, wenn ich das JQuery-Ereignis auslösen.

Answer 1

Verwenden Sie Attribute selector und wenden Sie Array.prototype.map darüber an.

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>