javascript - 使用 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>