How to filter jQuery data filter

Question

I want to create a filter function in jQuery. Therefore, when someone clicks on a category, he will only show the elements of this category. I have some functions, but I cannot get them to work.

I want to check if data-filter`data-cat matches from the list of categories. If so, I want to show a message that matches the form.

How am 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 messages, you will need a 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) filter/cat

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

2) id activiteiten, .

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

3)

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

JSFiddle

, .