jquery - 在 jQuery 中过滤 div 并根据自定义数据属性标签隐藏它们

Question

我花了几个小时为在线商家网站构建一个简单的可排序搜索结果。它的工作方式是从搜索页面获取 html 模板，同时使用 ajax 执行搜索。检索 json 数据，然后创建 div 元素。我已经完成了 sort、per 和 direction 排序，但现在我陷入了 filter排序，我真的不知道从哪里开始最后一个。

最后一个排序函数需要迭代每个 div，检查所选属性是否为 1 或 0。如果属性为 0，则需要为该 div 切换 hide 类。

我的问题是:

• 如何访问 each() 内当前选定的 div
• 如何检查 datatarget 是否等于 0。如果为 0，则隐藏它，或者
• 如果不是，如何继续执行 each() 的下一次迭代。

我想要实现的目标的简短伪代码:

$('div.item').each(function(){
 datartarget = (datatarget == 0) ? currentdiv.hide() : datatarget;
});

这是我的完整 jQuery 代码:

$(function(){
    var last_selector = null;
    last_selector = $('.filter , .sort, .per, .direction').click(function(){
        var clname = this.className;
        var direction = $('#direction > dd.active > a').attr('data-target');
        $('.sub-nav.'+clname+'').find('dd.active').removeClass('active');
        $(this).parent().addClass('active');
        var datatarget = $(this).attr('data-target');
        if(clname == 'sort')
        {
            $('div.item').tsort({order:direction,attr: datatarget+'-data'});
            last_selector = datatarget;
        }
        if(clname == 'filter')
        {
            last_selector = (last_selector == null) ? last_selector : $('#sort dd.active > a').attr('data-target');
            $('div.item').each(function(){

                //have no idea where to start )-:
            })
        }
        if(clname == 'per')
        {
            last_selector = (last_selector == null) ? last_selector : $('#sort dd.active > a').attr('data-target');
            var item_count = $('div.item').length; 
            if(item_count > datatarget)
            {
                while (item_count > datatarget) {
                    $('div.item:last-child').toggleClass('hide');
                    item_count = $('div.item').length;
                }
            }
            if(item_count < datatarget)
            {
                $('div.item.hide').toggleClass('hide');
                while (item_count > datatarget) {
                    $('div.item:last-child').toggleClass('hide');
                    item_count = $('div.item').length;
                }
            }
        }
        if(clname == 'direction')
        {
            direction = $(this).attr('data-target');
            datatarget = (last_selector == null) ? last_selector : 'price';
            $('div.item').tsort({order:direction,attr: datatarget+'-data'});
        }
        return last_selector;
    });
});

和 html

下拉选择div(为点击功能提供datatarget):

<a data-dropdown="direction" class="button dropdown">Direction Order</a>
<dl id="direction" data-dropdown-content class="sub-nav direction f-dropdown content">
  <dt><strong>Direction:</strong></dt>
  <dd class="active"><a class="direction" data-target="desc">Down</a></dd>
  <dd><a class="direction" data-target="asc">Up</a></dd>
</dl> 

<a data-dropdown="filter-by" class="button dropdown">Filter Results</a>
<dl id="filter-by" data-dropdown-content class="sub-nav filter f-dropdown content">
  <dt><strong>Filter Results:</strong></dt>
  <dd class="active"><a class="filter" data-target="new">Newest</a></dd>
  <dd><a class="filter" data-target="endsoon">Ending Soon</a></dd>
  <dd><a class="filter" data-target="reserve">No Reserve</a></dd>
  <dd><a class="filter" data-target="buyitnow">Buy It Now</a></dd>
  <dd><a class="filter" data-target="all">All</a></dd>
</dl> 

<a data-dropdown="sort-by" class="button dropdown">Sort Results</a>
<dl id="sort-by" data-dropdown-content class="sub-nav sort f-dropdown content">
  <dt><strong>Sort By:</strong></dt>
  <dd class="active"><a class="sort" data-target="end">End Time</a></dd>
  <dd><a class="sort" data-target="price">Price</a></dd>
  <dd><a class="sort" data-target="seller">Seller Reputation</a></dd>
</dl>  

<a data-dropdown="results-per" class="button dropdown">Results Per Page</a>
<dl id="results-per" data-dropdown-content class="sub-nav per f-dropdown content">
  <dt><strong>Per Page:</strong></dt>
  <dd class="active"><a class="per" data-target="100">100</a></dd>
  <dd><a class="per" data-target="75">75</a></dd>
  <dd><a class="per" data-target="50">50</a></dd>
  <dd><a class="per" data-target="25">25</a></dd>
</dl>

Answer 1

感谢 barmar 的帮助，我回答了自己的问题。

我很困惑，因为我没有意识到 this 会在 each() 内部反弹。

以下内容实现了我的目标，即通过首先取消隐藏任何隐藏元素，然后应用新过滤器来更改当前过滤器。

if(clname == 'filter')
{
    $('div.item.hide').toggleClass('hide');
    last_selector = (last_selector == null) ? last_selector : $('#sort dd.active > a').attr('data-target');
    $('div.item').each(function(){
        ($(this).attr(datatarget+'-data') == 0) ? $(this).hide() : false;
    });
}

当然，这仅解决基本功能。我仍然需要修改它以维护每页结果规则。