How to filter on data-filter jQuery

Question

I want to create a filter function in jQuery. So when someone clicks on a category, it will show only the items of that category. I have code some functions, but I can't get it work.

What I want is to check if the data-filter from the category list is equal to the `data-cat. If so I want to show the post that match the formule.

What do I wrong?

HTML:

        <div class="grid_12" id="category-nav">
            <ul id="category" class="list-of-links centered">
                <li><a href="#" class="current-cat" data-filter="rondvaart">Rondvaart</a></li>
                <li><a href="#" data-filter="wandelingen">Wandelingen</a></li>
                <li><a href="#" data-filter="rondleidingen">Rondleidingen</a></li>
                <li><a href="#" data-filter="groepsarrangementen">Groepsarrangementen</a></li>
            </ul>

        </div><!-- End div.grid_12 #category-nav -->

        <article class="post" data-cat="wandelingen">
                <header>
                    <p class="byline">Rondvaart</p>
                    <h2>Binnendieze</h2>
                </header><!-- End header -->

        </article><!-- End article.post -->

        <article class="post" data-cat="rondleidingen">
                <header>
                    <p class="byline">Rondvaart</p>
                    <h2>Binnendieze</h2>
                </header><!-- End header -->

        </article><!-- End article.post -->

        <article class="post" data-cat="wandelingen">
                <header>
                    <p class="byline">Rondvaart</p>
                    <h2>Binnendieze</h2>
                </header><!-- End header -->

        </article><!-- End article.post -->

        <article class="post" data-cat="groepsarrangnementen">
                <header>
                    <p class="byline">Rondvaart</p>
                    <h2>Binnendieze</h2>
                </header><!-- End header -->

        </article><!-- End article.post -->

jQUERY:

// Variable 
    var posts = $('#activiteiten .post');
        posts.hide();

    // Click function
    $( "#category li a" ).click(function() { 
        // Get data of category
        var customType = $( this ).data(); // category
            console.log(customType);
            console.log(posts.length); // Length of articles

        $('#activiteiten .post').each(function() {


            // Get data of item
            data = posts.data();
                   console.log(data);


            // If equal = show
            if( data == customType ){
                alert("equal");
            }


        });
    });

Answer 1

If you are going to filter your posts, you gonna need filter() method:

var posts = $('.post');
posts.hide();

$('#category li a').click(function() { 
    var customType = $( this ).data('filter');

    posts
        .hide()
        .filter(function () {
            return $(this).data('cat') === customType;
        })
        .show();
});

Demo: http://jsfiddle.net/FSLXT/

Answer 2

tomType = $( this ).data();

1) Missed to add the filter/cat attribute here

tomType = $( this ).data('filter');
data = posts.data('cat');

2) Also you're missing an element with id activiteiten so the below code fails.

var posts = $('#activiteiten .post');  //change as var posts = $('.post')
posts.hide();
data = posts.data();

3) Here is a way it has to be

 $('.post').each(function () {
     data = $(this).data('cat');
     // If equal = show
     if (data == customType) {
         alert("equal");
         $(this).show();  //show the matched element
     }
 });

JSFiddle

Hope you understood.