Thursday, April 5, 2012

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



Thanks.


Source: Tips4all

3 comments:

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

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


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

    ReplyDelete
  3. 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.

    ReplyDelete