获取元素所有数据属性的长度，但动态

Question

这段代码完美运行：

attributes = $("#testForm").data();
console.log(attributes);
console.log(Object.keys(attributes).length);

但只有一次，当我在点击事件上动态添加额外的数据属性时，它显示相同的值。我知道.data() 在某种程度上是缓存，但是如何动态处理它

例子：

<form id="testForm" data-id="33" data-size="45">

当我调用上面的代码时，它返回2，但是当我添加更多数据属性时，例如：

<form id="testForm" data-id="33" data-size="45" data-color="red" data-activity"1">

上面的代码仍然返回 2。

$(function ($) {
    attributes = $("#testForm").data();
    console.log(attributes);
    console.log(Object.keys(attributes).length);
    
   $('#testButton').on('click', function () {
     $("#testForm").attr( 'data-size' , 'test' );
     $("#testForm").attr( 'data-use' , 'test' );
      attributes = $("#testForm").data();
      console.log(attributes);
      console.log(Object.keys(attributes).length);
   });
 
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="filter-body" id="testForm" data-length="1">
          <button id="testButton">test<button>
        </form>

getAttribute() 和 attr() 需要特定的数据属性名称，在我的情况下，我将有 10,15 个或更多元素的数据属性，具有不同的名称，所以我可以传递特定的名称，我正在寻找获取所有它们的长度，但动态获取。

Answer 1

data 方法仅在第一次调用时读取自定义数据属性的值，如文档中所述。因此，要么使用 data 方法添加您的附加数据（然后 jQuery 将在内部处理存储），或者，如果您需要它们成为实际的自定义数据属性，请使用 HTMLElement.dataset 而不是 jQuery 的 data 方法。

这是一个DOMStringMap，它似乎没有任何长度或大小属性 - 因此您必须遍历所有条目，并在这样做时对它们进行计数。 https://stackoverflow.com/a/43021996/1427878 展示了如何使用简单的 for-in 循环来循环它们。