使用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选择器并在其上应用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>