JQuery filter links by data atribute

Question

I have a list of links that all fall into a different group. I want to have what would look like a filter that when pressed would only leave the links that are in that group active.

I am new to this whole JavaScript game so please bear with me as i'm not totally sure of what its capabilities are.

Here is a small snippet of what i am trying to accomplish i hope its self explanatory.

http://jsfiddle.net/bardsworth/QCeXV/16/

var appNames = [
    ["What's Your Road?", "http://www.google.com", ["F0", "F1", "F2"]],
    ["Career Connect", "http://www.google.com", ["F0", "F1", "F2"]],
    ["FastForward", "http://www.google.com", []],
    ["Zombie College", "http://www.google.com", ["F0", "F1", "F2"]],
    ["WOOP", "http://www.google.com", ["F0", "F1", "F2"]],
    ["I'm First", "http://www.google.com", []],
    ["CollegeGo", "http://www.google.com", []],
    ["Logrado", "http://www.google.com", []],
    ["KRED", "http://www.google.com", []],
    ["College Connect", "http://www.google.com", []],
    ["Tractus Insight", "http://www.google.com", []],
    ["PossibilityU", "http://www.google.com", []],
    ["ApplyFul", "http://www.google.com", []],
    ["Raise", "http://www.google.com", []],
    ["College Abacus", "http://www.google.com", ["F0", "F1", "F2"]],
    ["FAFSA Community", "http://www.google.com", []],
    ["MyCoach", "http://www.google.com", []],
    ["GradGuru", "http://www.google.com", []],
    ["Transfer Bootcamp", "http://www.google.com", []]];

for (var i = 0; i < 10; i++) {
    createListHTML(i);

    // mapFilter function and stuff
    $("#mapFilter :checkbox").click(function () {

        // at this point what is the best way to loop through all my links and only keep active those that are associated with the check marks that are active.

        var a = $("a[data-" + $(this).val() + "= " + true + " ]");

        //a.hide(); // but i really want an enable

        /* this loops through all checked boxes which is kinda cool
           $("#mapFilter :checkbox:checked").each(function() 
           {
           //$("." + $(this).val()).show();
           });
        */
    });}

function createListHTML($n) {
    // FACTORY
    var ul = $(".appList");

    var li = $('<li>').appendTo(ul);

    var link = $('<a>', {
        text: appNames[$n][0],
        title: appNames[$n][0],
        target: "_blank",
        href: appNames[$n][1],
        //click: function(){ BlahFunc( options.rowId );return false;}
    }).appendTo(li);

    /* is there a better way of adding these data attributes? i am open to being schooled as to waht is the best way */
    // filters
    var filterArray = appNames[$n][2];
    for (var a = 0; a < filterArray.length; a++) {
        link.data(filterArray[a], true)

    }


}

Answer 1

Use a string as the data value, not the boolean true, because the selector you construct is matching a string.

for (var a = 0; a < filterArray.length; a++) {
    link.data(filterArray[a], 'true');
}

Then in your click handler, do:

var a = $("a[data-" + $(this).val() + "=true]");

To get all the elements that don't have the attribute, you can use the :not pseudo-seletor:

var a = $("a:not([data-" + $(this).val() + "=true])");

Another suggest. Use arrays for homogeneous, linear collections, but use objects for heterogenous collections. So your appNames should be something like:

var appNames = [
    { name: "What's Your Road?", url: "http://www.google.com", filters: ["F0", "F1", "F2"]},
    { name: "Career Connect", url: "http://www.google.com", filters: ["F0", "F1", "F2"]]},
    ... and so on
];

Then you would access the components as: appNames[$n].name, appNames[$n].url, and appNames[$n].filters. Isn't that nicer than meaningless numbers 0, 1, and 2 to indicate the components?