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;
});