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

Disons que j'ai 4 éléments div avec class .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 que vous .navlinkcliquez sur un nouveau , je souhaite stocker le précédent sélectionné navlinkpour une manipulation ultérieure. Existe-t-il un moyen rapide et facile de sélectionner un élément en fonction de ce qui a été stocké .data()?

Il ne semble pas y avoir de jQuery : des filtres 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 façons d'accomplir cela, mais pour le moment, je suis surtout curieux de savoir si cela peut être fait via .data().

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 mémoire, vous pouvez filtrer sur les données avec jquery (cette question est assez ancienne, et jQuery a évolué depuis, il est donc juste d'écrire cette solution également):

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

ou mieux (pour les performances):

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

ou, si vous voulez obtenir tous les éléments avec data-selectedset:

$('[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' .data()appel, cette méthode ne fonctionnera plus.

Nous pouvons créer 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 (ce sont peut-être des erreurs du moment où vous l'avez écrit).

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)

Sonne comme plus de travail que sa valeur.

1) Pourquoi ne pas avoir une seule variable JavaScript qui stocke une référence à l'élément \ jQuery actuellement sélectionné.

2) Pourquoi ne pas ajouter une classe à l'élément actuellement sélectionné. Ensuite, vous pouvez interroger le DOM pour la classe ".active" ou quelque chose.