Question

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

最后一个sort函数需要遍历每个div，检查所选属性是1还是0.如果属性为0，则需要为div切换hide类。

我的问题是：

如何访问each()
如何检查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;
    });
}

当然，这只涉及基本功能。我仍然需要修改它以维护每页的结果规则。

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

1 个答案: