jquery - 过滤子div？

Question

我把表转换成只是div ......但是，在这样做，我需要重写一个函数，我有一些问题......我试图实现$（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：

<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

试试这个：（未经测试）

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

这应该这样做。

Answer 3

只是踢，这里是和优化的版本，使用jQuery的链接的end()方法：

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

    return false; 
});