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

【问题标题】：filtering divs in jQuery and hiding them based on a custom data attribute tag在 jQuery 中过滤 div 并根据自定义数据属性标签隐藏它们
【发布时间】：2014-08-30 09:35:27
【问题描述】：

我花了几个小时来为在线商家网站构建一个简单的可排序搜索结果。它的工作方式是从搜索页面获取一个 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>

【问题讨论】：

您的三元运算符似乎倒退了。测试为真时返回?之后的部分。
@Barmar 我如何访问每个内部的当前位置？我认为这让我感到困惑。如何获取each()内部的当前div选择器，即div数组中的当前位置。
@Barmar，这不是已经分配给点击事件的选择器了吗？我仍然是js的初学者，所以请原谅我缺乏知识。 this 是否会更改为 each() 函数的当前位置？
在.each() 内部，它将this 重新绑定到迭代的当前元素。
哦，好的。谢谢。如果解决了，您会将其作为答案提交，以便我可以奖励您解决的问题

标签： jquery sorting attributes ternary-operator

【解决方案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;
    });
}

当然，这仅涉及基本功能。我仍然需要对其进行修改以维护每页规则的结果。

【讨论】：