jquery - фильтр дочерних divs?

Question

Я закончил преобразование таблицы в divs ... Но при этом мне нужно переписать функцию, и у меня возникли некоторые проблемы ... Я попытался реализовать $ (this) .closest (' div '), но это не делает то, что я думал, что будет делать ... Все еще читаю, но если кто-то знает о решении, я был бы счастливым туристом ...

По сути, когда я нажимаю на ссылку , он фильтрует таблицу для отображения только строк с классом, который соответствует классу этой ссылки, ...

Это код, который первоначально был создан, чтобы фильтровать таблицу ...

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

Я с тех пор изменил таблицу дивы:

<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> 

Как я уже сказал, я все еще ищу, но я быть ужасно неудачной ...

Answer 1

Попробуйте это: (непроверенные)

Answer 2

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

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

Это должно быть сделано.

Answer 3

Просто для Пинки, вот это оптимизированная версия, которая использует JQuery цепочки и end() метод:

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

    return false; 
});