¿Almacenar información arbitraria en etiquetas HTML para JavaScript?

Question

Una pregunta muy general.

Estoy generando dinámicamente un formulario que se divide en varios niveles de pestañas mediante HTML / JavaScript.

Quiero resaltar algunos de los campos (aquellos que tienen un valor que difiere de una plantilla global) con un símbolo de estrella * mediante CSS e imagen de fondo.

Un campo JS se itera a través de cada campo, compara su valor y establece una clase de CSS si es necesario. Hasta ahora, todo bien.

Además, quiero que no solo todos los campos modificados se marquen con una estrella, sino también la pestaña en la que se encuentra.

Debido a que me encanta, me gustaría almacenar el ID del elemento de la pestaña como un atributo en algún lugar de la etiqueta HTML de cada campo (algo como " parentTab "). La función JS luego resalta el campo y su " parentTab " Elemento (y tal vez también el de " parentTab ").

Mi primer enfoque es hacer un mal uso del " título " Atributo o Somethiong para almacenar ParentTab en. Por supuesto, eso es sucio. Sin embargo, si simplemente agrego atributos arbitrarios a la etiqueta DIV o INPUT, no se validará más y me siento menos seguro al acceder a estos atributos: ¿quién sabe cómo los diferentes navegadores lo manejan y lo manejará en el futuro? / p>

Entonces, mi pregunta es: ¿existe una forma válida, que cumpla con los estándares, un atributo de algún tipo, para almacenar datos arbitrarios dentro de etiquetas HTML, para su posterior procesamiento por JavaScript?

Por supuesto, podría crear un " parentTabs " JS arreglo y se hará con él. Pero almacenarlo en la entrada en sí sería mucho más elegante.

Answer 1

Puede averiguar a qué elemento con pestañas pertenece un campo escribiendo una función isChildOf, como esto: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Usar el DOM para resolver esto siempre será más " elegante " que duplicar los datos en algún formato personalizado.

Answer 2

con la introducción de html5, puede usar los atributos que comienzan con los datos de - , y todavía se validarán.

<input type="text" name="username" data-parentTab="tab1" value="non-default">

Answer 3

El atributo rel es a menudo una excelente opción válida para almacenar datos como este.

Answer 4

En jQuery tienes la API de datos para el asunto. http://docs.jquery.com/Internals/jQuery.data

Si no usa jQuery, puede agregar sus propias etiquetas y almacenar cualquier cosa en él. todo el mundo le dirá que esto no es bueno, etc., pero todas las grandes empresas web lo están haciendo. por lo que terminarás en una gran compañía ;-)

Answer 5

Me gusta cómo John Resig hizo esto: una etiqueta de script de tipo arbitrario . Su ejemplo es sobre las plantillas, pero realmente podría usar esto para cualquier cosa.