Tutorial :Filter element based on .data() key/value



Question:

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().


Solution:1

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   });  


Solution:2

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.


Solution:3

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);  


Solution:4

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 )


Solution:5

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »