jquery - filter child divs?

Question

I wound up converting a table to just divs... But, in doing that, I need to rewrite a function and I'm having some issues... I've tried to implement $(this).closest('div'), but it's not doing what I thought that would do... Still reading, but if someone knows of a solution, I'd be a happy camper...

Essentially, when I click on a link, it filters the table to only display rows with a class that matches the link's class...

This is the code, which was originally created to filter a table...

<a href="#" class="dairy">Dairy</a>
<a href="#" class="meat">Meat</a>
<a href="#" class="vegetable">Vegetable</a>

$('a').click(function(evt){
    var myId = $(this).attr('class');

    $('tr').each(function(idx, el){
        if ($(el).hasClass(myId))
        {
            $(el).show();
        }
        else
        {
            $(el).hide();
        }
    });
});

I've since changed the table to divs:

<div id="primary-div">

  <div class="child dairy">
    <div class="title">Title</div>
    <div class="text">Lorem ipsum</div>
  </div>

  <div class="child dairy">
    <div class="title">Title</div>
    <div class="text">Lorem ipsum</div>
  </div>

  <div class="child meat">
    <div class="title">Title</div>
    <div class="text">Lorem ipsum</div>
  </div>

  <div class="child vegetable">
    <div class="title">Title</div>
    <div class="text">Lorem ipsum</div>
  </div>

</div>

Like I said, I'm still looking, but I'm being horribly unsuccessful...

Answer 1

Try this: (Untested)

<a href="#" class="dairy">Dairy</a>
<a href="#" class="meat">Meat</a>
<a href="#" class="vegetable">Vegetable</a>
$('a').click(function(e){
    var myId = $(this).attr('class');

    $('#primary-div div.child:not(.' + myId + ')').hide();
    $('#primary-div div.child.' + myId).show();

    return false;
});

Answer 2

$('a').click(function(evt){
    var myId = $(this).attr('class');

    $('div#primary-div div.child').hide();
    $('div#primary-div div.'+myId).show();
});

This should do it.

Answer 3

Just for kicks, here is an optimized version that utilizes jQuery chaining and the end() method:

$('a').click(function(e){
    $("div#primary-div > div")
         .not('.' + this.className).hide().end()
         .filter('.' + this.className).show();

    return false;
});