Elemento filtro basato sulla chiave / valore .data ()

Question

Supponi di avere 4 elementi div con classe .navlink , che, quando viene cliccato, usa .data () per impostare una chiave chiamata 'selected' , ad un valore di true :

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

Ogni volta che si fa clic su un nuovo .navlink , vorrei memorizzare il navlink precedentemente selezionato per successive manipolazioni. Esiste un modo rapido e semplice per selezionare un elemento in base a ciò che è stato memorizzato utilizzando .data () ?

Sembra che non ci siano jQuery : filtri adatti al conto e ho provato quanto segue (all'interno dello stesso evento clic), ma per qualche motivo non funziona:

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

So che ci sono altri modi per farlo, ma in questo momento sono per lo più solo curioso di sapere se può essere fatto tramite .data () .

Answer 1

il tuo filtro funzionerebbe, ma devi restituire true sugli oggetti corrispondenti nella funzione passata al filtro affinché possa afferrarli.

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

Answer 2

Solo per la cronaca, puoi filtrare i dati con jquery (questa domanda è piuttosto vecchia e jQuery si è evoluta da allora, quindi è giusto scrivere anche questa soluzione):

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

o, meglio (per prestazioni):

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

oppure, se si desidera ottenere tutti gli elementi con dati selezionati impostati:

$('[data-selected]')

Nota che questo metodo funziona solo con i dati impostati tramite attributi html. Se imposti o modifichi i dati con la chiamata .data () , questo metodo non funzionerà più.

Answer 3

Possiamo creare un plugin abbastanza facilmente:

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

Utilizzo (controllo di un pulsante di opzione):

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

Answer 4

Due cose che ho notato (potrebbero essere errori da quando l'hai scritto).

1. Hai perso un punto nel primo esempio ( $ ('. navlink'). fai clic su )
2. Perché il filtro funzioni, devi restituire un valore ( return $ (this) .data (" selezionato ") == vero )

Answer 5

Sembra più lavoro di quanto valga la pena.

1) Perché non avere una sola variabile JavaScript che memorizza un riferimento all'elemento \ jQuery attualmente selezionato.

2) Perché non aggiungere una classe all'elemento attualmente selezionato. Quindi puoi interrogare il DOM per " .active " classe o qualcosa del genere.