web-dev-qa-db-fra.com

Élément de filtre basé sur la clé / valeur .data ()

Supposons que j'ai 4 éléments div avec la classe .navlink, Qui, lorsque vous cliquez dessus, utilisez .data() pour définir une clé appelée 'selected', Avec une valeur de true :

$('.navlink')click(function() { $(this).data('selected', true); })

Chaque fois que vous cliquez sur un nouveau .navlink, Je souhaite stocker le navlink précédemment sélectionné pour une manipulation ultérieure. Existe-t-il un moyen simple et rapide de sélectionner un élément en fonction de ce qui a été stocké avec .data()?

Il ne semble pas y avoir de jQuery : filters qui correspond à la facture, et j'ai essayé ce qui suit (au sein du 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 pour l'instant, je suis surtout curieux de savoir si cela peut être fait via .data().

jqueryfilter
112
user113716

votre filtre fonctionnerait, mais vous devez renvoyer true sur les objets correspondants de la fonction transmise au filtre pour qu'il puisse les récupérer.

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});
179
BaroqueBobcat

Pour mémoire, vous pouvez filtrer les données avec jquery (cette question est assez ancienne et jQuery a évolué depuis, il est donc correct d'écrire cette solution également):

$('.navlink[data-selected="true"]');

ou mieux (pour la performance):

$('.navlink').filter('[data-selected="true"]');

ou, si vous voulez obtenir tous les éléments avec data-selected, définissez:

$('[data-selected]')

Note que cette méthode fonctionnera uniquement 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.

133
StefanoP

Nous pouvons faire un plugin assez facilement:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

Utilisation (cocher un bouton radio):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);
13
mpen

Deux choses que j’ai remarquées (c’est peut-être une erreur de quand vous l’avez écrite).

  1. Vous avez manqué un point dans le premier exemple ($('.navlink').click)
  2. Pour que le filtre fonctionne, vous devez renvoyer une valeur (return $(this).data("selected")==true)
8
Thomas