Armazenando informações arbitrário em tags HTML para JavaScript?

Question

Uma pergunta muito geral.

Eu estou gerando dinamicamente uma forma que é dividido em vários níveis de guias usando HTML / JavaScript.

quero destacar alguns dos campos (aqueles que têm um valor diferente de um modelo global) com uma estrela * símbolo usando CSS e background-image.

campo um JS percorre cada campo, compara o seu valor, e define uma classe CSS para ele, se necessário. Tão longe, tão bom.

Agora, além disso, eu quero não só cada campo alterado para ser marcado com uma estrela, mas também o guia que se encontra.

Porque eu amo-o simples, eu gostaria de armazenar o ID elemento do guia como um lugar atributo na tag HTML de cada campo (algo como "parentTab"). A função JS seguida, destaca o campo e seu elemento "parentTab" (e talvez seja um "parentTab" também).

Minha primeira abordagem é a de mau uso do atributo "título" ou somethiong para armazenar parentTab. Claro, isso é sujo. No entanto, se eu apenas descontroladamente adicionar atributos arbitrários para o DIV ou INPUT tag, não vai validar qualquer mais e eu me sinto menos do que seguro o acesso a esses atributos - quem sabe como diferentes navegadores lidar com isso, e vai lidar com isso no futuro

Assim, a minha pergunta é: Existe uma padrões forma válida, compatível - um atributo de algum tipo - para armazenar dados arbitrários dentro de tags HTML, para processamento adicional por JavaScript

Claro, eu poderia criar um "parentTabs" array JS e ser feito com ele. Mas armazená-lo na própria entrada seria muito mais elegante.

Answer 1

Você pode descobrir quais abas elemento de um campo pertence escrevendo uma função isChildOf, como este: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Usando o DOM para resolver isso será sempre mais "elegante" do que duplicar os dados em algum formato personalizado.

Answer 2

com a introdução de html5, você pode usar atributos que começam com data- , e eles ainda validar.

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

Answer 3

O atributo rel é muitas vezes uma ótima opção válida para armazenar dados assim.

Answer 4

Em jQuery você tem a API de dados para o assunto. http://docs.jquery.com/Internals/jQuery.data

Se você não usar o jQuery, você pode adicionar suas próprias tags e armazenamento de qualquer coisa nele. todo mundo vai dizer que isso não é agradável etc, mas todas as grandes empresas de web estão fazendo isso. assim você vai acabar em uma grande empresa; -)

Answer 5

Eu gosto de como John Resig fez isso: a tag script com tipo arbitrário . Seu exemplo é de cerca de templates, mas você poderia realmente usar isso para nada.