Filter element based on .data() key/value

Say I have 4 div elements with class .navlink, which, when clicked, use .data() to set a key called 'selected', to a value of true:

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

Every time a new .navlink is clicked, I would like to store the previously selected navlink for later manipulation. Is there a quick and easy way to select an element based on what was stored using .data()?

There don't seem to be any jQuery :filters that fit the bill, and I tried the following (within the same click event), but for some reason it doesn't work:

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

I know that there are other ways to accomplish this, but right now I'm mostly just curious if it can be done via .data().

your filter would work, but you need to return true on matching objects in the function passed to the filter for it to grab them.

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

Just for the record, you can filter on data with jquery (this question is quite old, and jQuery evolved since then, so it's right to write this solution as well):

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

or, better (for performance):

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

or, if you want to get all the elements with data-selected set:

$('[data-selected]')

Note that this method will only work with data that was set via html-attributes. If you set or change data with the .data() call, this method will no longer work.

We can make a plugin pretty easily:

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

Usage (checking a radio button):

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

Two things I noticed (they may be mistakes from when you wrote it down though).

1. You missed a dot in the first example ( $('.navlink').click )
2. For filter to work, you have to return a value ( return $(this).data("selected")==true )

Sounds like more work than its worth.

1. Why not just have a single JavaScript variable that stores a reference to the currently selected element\jQuery object.

2. Why not add a class to the currently selected element. Then you could query the DOM for the ".active" class or something.