Élément filtrant basé sur.de données() clé/valeur
Disons que j'ai 4 éléments div avec la classe .navlink, qui, lorsqu'ils sont cliqués, utilisent .data() pour définir une clé appelée 'selected', à une valeur de true:
$('.navlink')click(function() { $(this).data('selected', true); })
Chaque fois qu'un nouveau .navlink est cliqué, je voudrais stocker précédemment sélectionné navlink pour plus tard manipulation. Existe-t-il un moyen rapide et facile de sélectionner un élément en fonction de ce qui a été stocké en utilisant .data()?
Il ne semble pas y avoir de jQuery :filters qui correspondent à la facture, et j'ai essayé ce qui suit (dans le même événement de clic), mais pour une raison quelconque, cela ne fonctionne pas:
var $previous = $('.navlink').filter(
function() { $(this).data("selected") == true }
);
Je sais qu'il existe d'autres moyens d'y parvenir, mais en ce moment je suis surtout curieux de savoir si cela peut être fait via .data().
5 réponses
Votre filtre fonctionnerait, mais vous devez retourner true sur les objets correspondants dans la fonction passée au filtre pour qu'il les récupère.
var $previous = $('.navlink').filter(function() {
return $(this).data("selected") == true
});
Juste pour Info, vous Pouvez filtrer les données avec jquery (cette question est assez ancienne, et jQuery a évolué depuis, il est donc juste d'écrire cette solution aussi):
$('.navlink[data-selected="true"]');
Ou, mieux (pour les performances):
$('.navlink').filter('[data-selected="true"]');
Ou, si vous voulez obtenir tous les éléments de data-selected set:
$('[data-selected]')
Notez que cette méthode ne fonctionnera qu'avec les données définies via les attributs html. Si vous définissez ou modifiez des données avec l'appel .data(), cette méthode ne fonctionnera plus.
, Nous pouvons faire un plugin assez facilement:
$.fn.filterData = function(key, value) {
return this.filter(function() {
return $(this).data(key) == value;
});
};
Utilisation (vérification d'un bouton radio):
$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);
Deux choses que j'ai remarquées (elles peuvent être des erreurs quand vous l'avez écrit).
- Vous avez manqué un point dans le premier exemple (
$('.navlink').click) - pour que le filtre fonctionne, vous devez renvoyer une valeur (
return $(this).data("selected")==true)
Sonne comme plus de travail que sa valeur.
1) Pourquoi ne pas simplement avoir une seule variable JavaScript qui stocke une référence à l'objet element\jQuery actuellement sélectionné.
2) Pourquoi ne pas ajouter une classe à l'élément actuellement sélectionné. Ensuite, vous pouvez interroger le DOM pour le ".active " classe ou quelque chose.