Este código funciona perfecto:
attributes = $("#testForm").data(); console.log(attributes); console.log(Object.keys(attributes).length); pero solo una vez, cuando agregué dinámicamente atributos de datos adicionales al hacer clic en el evento, muestra el mismo valor. Sé que .data() son cachés de alguna manera, pero cómo manejarlo dinámicamente
Ejemplo:
<form id="testForm" data-id="33" data-size="45">Cuando llamo al código anterior, devuelve 2, pero cuando agregué más atributos de datos, como:
<form id="testForm" data-id="33" data-size="45" data-color="red" data-activity"1">El código anterior todavía devuelve 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() y attr() requieren un nombre de atributo de datos específico, en mi caso tendré 10,15 o más atributos de datos del elemento, con un nombre diferente, por lo que puedo pasar un nombre específico, estoy buscando obtener la longitud de todos ellos, pero de forma dinámica.
El método data solo lee los valores de los atributos de datos personalizados en la primera invocación, como se menciona en los documentos. Entonces, agregue sus datos adicionales usando el método de datos (entonces jQuery manejará el almacenamiento internamente) o, si necesita que sean atributos de datos personalizados reales, use HTMLElement.dataset en lugar del método de datos de jQuery.
Ese es un DOMStringMap , que no parece tener ninguna propiedad de longitud o tamaño, por lo que tendrá que recorrer todas las entradas y contarlas mientras lo hace. https://stackoverflow.com/a/43021996/1427878 muestra cómo recorrerlos con un bucle for-in simple.