Jquery: Créer des attributs cachés? Je dois réduire bulkyness tag

Question

Je suis sûr que nous avons tous fait cela auparavant:

<a id="232" rel="link_to_user" name="user_details" class="list hoverable clickable selectable"> 
USER #232 
</a> 

Mais nous disons, oh mon, je besoin de plus de moyens pour stocker les informations de suivi sur ce div!

<a id="232-343-22" rel="link_to_user:fotomeshed" name="user_details" class="groupcolor-45 elements-698 list hoverable clickable selectable"> 
User: John Doe 
</a> 

Et la maladie ne cesse de croître. Nous continuons à l'emballer dans ce pauvre petit élément et ses attributs. Tout pour que nous puissions garder la trace de qui c'est.

Donc, avec ma connaissance limitée de JS, quelqu'un s'il vous plaît me dire comment faire quelque chose comme ceci:

<a id="33">USER #33</a> 

$(#33).attr({title:'User Record','username':'john', 'group_color':'green', 'element_num':78}); 

Donc nous venons d'ajouter ce que je qualifierais attributs invisibles, parce que nous avons joué Dieu et fait les attributs à la volée comme si ce n'était pas un problème. La partie cool est que ceux-ci seraient conservés dans leur propre petit objet quelque part dans une terre variable. PAS dans l'étiquette elle-même.

Puis, plus tard, dans un code imbriqué très loin, être en mesure de dire, oh, je me demande ce que group_color John est ...

user_group_color = $(table).find(a['username':'john']).attr('group_color'); 

ALORS BAM !!!! POW !!!! Vous apprenez à connaître la couleur de son groupe ... le tout sans ajouter un tas d'absurdité de repérage d'élément boursouflé dans nos étiquettes.

Alors, est-ce que ce genre de chose existe? Si non, comment puis-je le faire?

Answer 1

Vous pouvez utiliser .data() uniquement dans ce but :), comme ceci:

$("#33").data({title:'User Record','username':'john', 'group_color':'green', 'element_num':78}); 

Remarque: ID ne peut pas commencer par un chiffre, en ignorant que pour correspondre à votre exemple!

Et pour obtenir la valeur:

user_group_color = $('table').find('a').data('group_color'); 

Si vous avez besoin de trouver par nom d'utilisateur encore, utilisez .filter() comme ceci:

user_group_color = $('table').find('a').filter(function() { 
    return $(this).data('username') === 'john'; 
}).data('group_color'); 

---

pas directement à la question, mais peut-être un gain de temps. Vous pouvez faire un sélecteur aussi bien, comme celui-ci:

jQuery.expr[":"].username = function(a, b, m) { 
    return jQuery(a).data('username') == m[3]; 
}; 

aller chercher ensuite l'élément par nom d'utilisateur ressemblerait à ceci:

user_group_color = $('table').find('a:username(john)').data('group_color'); 

Vous voyez le modèle, il suffit d'utiliser cela pour tout attribut couramment utilisé vous besoin de filtrer par.

Answer 2

Si vous ne voulez pas utiliser jQuery.data comme suggéré par d'autres pour une raison quelconque, il n'y a aucune raison pour que vous ne puissiez pas relier les données à vos éléments par ID (ou tout autre attribut).Par exemple:

HTML:

<span id='foo1'>blah blah blah</span> 
<span id='foo2'>blah blah blah</span> 

Javascript:

var elementData = { 
    foo1: { 
     x: 1, 
     y: 2 
    }, 
    foo2: { 
     x: 3, 
     y: 4 
    }, 
}; 

Utilisation:

var foo = /* ...get one of the `fooX` elements ... */; 
var fooData = elementData[foo.attr('id')]; 
alert(fooData.x); // alerts 1 or 3 depending on which `foo` you have 

Ajout de nouvelles données à la volée:

elementData[newID] = { 
    x: 42, 
    y: 73 
}; 

Modification de données sur la volée:

elementData[theID].x = 27;