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。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JQuery $ .children（）和$ .each（）迭代data- *元素？

1 个答案: