Using Jquery Quicksand with links instead of form values

Question

Here is my working code: http://www.metropoliscreative.com/jake_test/index.html

I'm trying to use the Jquery Quicksand plugin to filter two types of data. I have this currently working with the two dropdown forms at the top. I'm trying to instead get them to work with the links below. Since links don't have a val() like the form selections, I'm not sure how I would go about getting those links to correspond...

*Edit: I suppose the issue is less about the plugin and more about porting the use of an 's val attribute into an equivalent use on an . It seems to me that an can't "store" a value in the same way a form can?

Thanks in advance for your time. I've been struggling for a couple days now! :D

Answer 1

I think what you're asking is pretty easy to achieve. Two options:

1. Put whatever values you're using in the "value" attribute of your tags in the "href" attribute of your tags.
2. Leave the "href" attribute alone and use a custom attribute (HTML5 now allows this) named as such: "data-attributename"

After your links are setup in this way, bind click events to them using jQuery and, in the function handling the click, grab the value from the attribute:

$('.myList a').click(function(){
    var filterValue = $(this).attr('href');

   // Filtering function using "filterValue" as input...
});

Substitute the usage of attr('href') above for whichever technique you're using.

Hope this helps!

Answer 2

You can select any element in a link just like in a form element by using jQuery("a").attr("href"); You can replace "href" with whichever attribute you'd like to select, eg. "rel"

Answer 3

This a good place to try out the HTML5 data- attribute spec. It works all the way back to IE6 and you can stick any arbitrary data onto just about any element without non-semantic workarounds like stuffing data into the href.

Example:

<li><a data-val="1" name="bp">Brochure Packages</a></li>