Elemento de filtro com base na chave / valor .data ()

Digamos que eu tenha 4 elementos div com class .navlink, que, quando clicados, usam .data()para definir uma chave chamada 'selected', para um valor de true:

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

Cada vez que um novo .navlinké clicado, gostaria de armazenar o selecionado anteriormente navlinkpara manipulação posterior. Existe uma maneira rápida e fácil de selecionar um elemento com base no que foi armazenado usando .data()?

Não parece haver nenhum filtro jQuery : que se encaixe no perfil, e tentei o seguinte (dentro do mesmo evento de clique), mas por algum motivo não funcionou:

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

Eu sei que existem outras maneiras de fazer isso, mas agora estou curioso para saber se isso pode ser feito via .data().

seu filtro funcionaria, mas você precisa retornar true em objetos correspondentes na função passada ao filtro para que ele os capture.

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

Apenas para registro, você pode filtrar os dados com jquery (esta questão é bastante antiga, e o jQuery evoluiu desde então, então é certo escrever esta solução também):

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

ou melhor (para desempenho):

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

ou, se você deseja obter todos os elementos com data-selectedset:

$('[data-selected]')

Observe que este método só funcionará com dados que foram configurados por meio de atributos html. Se você definir ou alterar os dados com a .data()chamada, esse método não funcionará mais.

Podemos fazer um plugin com bastante facilidade:

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

Uso (marcando um botão de opção):

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

Observei duas coisas (podem ser erros de quando você escreveu).

1. Você perdeu um ponto no primeiro exemplo ( $('.navlink').click)
2. Para que o filtro funcione, você deve retornar um valor ( return $(this).data("selected")==true)

Parece mais trabalho do que vale a pena.

1) Por que não ter apenas uma única variável JavaScript que armazena uma referência ao objeto elemento \ jQuery atualmente selecionado.

2) Por que não adicionar uma classe ao elemento atualmente selecionado. Então você pode consultar o DOM para a classe ".active" ou algo assim.