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

jquery - 过滤子div？

3 个答案: