jquery obtenir des attributs

Question

Je cherche un moyen de saisir les attributs personnalisés d'un élément avec jquery. Je cherche à obtenir: ["data-type", "data-sort"] en tant que tableau.

Quelqu'un sait-il comment faire?

Merci.

Answer 1

Vous pouvez utiliser le .attributes DOM property et boucle à travers, comme ceci:

var arr = document.getElementById('element').attributes, attributes = []; 
//or if you're inside a jQuery loop, just use this.attributes 
//e.g.: var arr = $("span").get(0).attributes, attributes = []; 
for(var i = 0; i < arr.length; i++) { 
    if(arr[i].name.indexOf("data-") == 0) //only ones starting with data- 
    attributes.push(arr[i].name); 
} 
alert(attributes); ​//use it for something, result is ["data-type", "data-sort"] 

You can see a working demo here, en dehors de saisir l'élément, ce n'est pas jQuery spécifique du tout, de sorte que vous pouvez facilement l'enlever complètement si nécessaire.

Answer 2

tout simplement $('#element').attr('data-type'); et $('#element').attr('data-sort');

désolé, répondre avant de lire toute la question: -/ne pense pas qu'il y ait une fonctionnalité intégrée pour les obtenir comme un tableau, obtenir le premier, obtenir la deuxième, puis construire le tableau manuellement.

Answer 3

Juste pour référence pour ceux qui utilisent jQuery, attributs commençant par « Data- » est accessible par la fonction data():

<span id='element' data-type='foo' data-sort='bar'></span> 

var el = $('#element'); 
return [el.data('type'), el.data('sort')]; 

Certains navigateurs commencent à stocker dans des méthodes plus avancées (stockage de données locales?) et d'autres ne le sont pas, mais cela semble plutôt bien fonctionner. Notez que les validateurs du W3C n'aiment pas les attributs expando comme celui-ci, mais je pense qu'il y a des propositions pour normaliser cela afin qu'ils soient validés. La dernière fois que j'ai recherché la meilleure façon de stocker des données avec un élément, en utilisant data-key comme cela a été l'un des gagnants parmi les professionnels.

Une autre façon que je courais à travers de lier les données à un élément est d'insérer une balise de script immédiatement avant ou après l'élément, en lui donnant un autre type que text/javascript tels que:

<script id="templatedata" type="text/html"> 
    <span>23</span> 
    <span>Alfred</span> <!-- I'm sure you can get more creative than I'm being here --> 
</script> 

Ce ne sera pas affichée dans le navigateur, et vous pouvez toujours obtenir le code HTML par $('#templatedata').html();. Cela peut encore poser des problèmes car techniquement, ce n'est pas correct, mais si la validation HTML du W3C est importante pour vous, cela peut être une option viable.

Answer 4

Vous pouvez utiliser ce code, c'est très simple à rechercher. Juste inclure jquery rien d'autre .. Simple Jquery Filter