jQuery中过滤的div并隐藏他们基于自定义数据属性标签 [英] filtering divs in jQuery and hiding them based on a custom data attribute tag

查看：155
本文介绍了jQuery中过滤的div并隐藏他们基于自定义数据属性标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我几个小时到构建一个简单的排序搜索结果的在线商家网站。它的工作方式是，一个HTML模板是获取搜索页面，而搜索是用Ajax进行。 JSON数据被检索，然后被创建的div元素。我已经完成了排序，每个和方向各种各样的，但现在我卡上的过滤排序，我真的不知道从哪里开始，甚至在这最后一个。

最后排序函数需要遍历每个div，检查1所选择的属性或属性为0，则隐藏类需要一个0。切换的DIV。

我的问题是：


  • 如何访问里面当前选中的div 每（）

  • 如何检查datatarget等于0。
    隐藏它，如果它是0，或

  • 如何继续的下一次迭代每（）如果事实并非如此。

的我想要达到一个简短的伪code： 

  $（'div.item'）。每个（函数（）{
 datartarget =（datatarget == 0）？ currentdiv.hide（）：datatarget;
}）;

这里是我的全的jQuery code： 

  $（函数（）{
    VAR last_selector = NULL;
    last_selector = $（'过滤器，的.sort，.per，.direction'）。点击（函数（）{
        VAR列表CLNAME = this.className;
        变种方向= $（'＃方向＆GT; dd.active＆gt;一种'）。ATTR（'数据目标'）;
        $（'子导航。'+列表CLNAME +''）（dd.active'）removeClass移除。（激活）找到。;
        $（本）.parent（）addClass（激活）。
        VAR datatarget = $（本）.attr（数据目标）;
        如果（列表CLNAME =='排序'）
        {
            $（'div.item'）tsort的（{顺序：方向，ATTR：datatarget +' - 数据'}）;
            last_selector = datatarget;
        }
        如果（列表CLNAME =='过滤器'）
        {
            last_selector =（last_selector == NULL）？ last_selector：$（'＃排序dd.active＆gt;一种'）ATTR（'数据目标'）;
            $（'div.item'）。每个（函数（）{                //不知道从哪里开始） - ：
            }）
        }
        如果（列表CLNAME =='每次'）
        {
            last_selector =（last_selector == NULL）？ last_selector：$（'＃排序dd.active＆gt;一种'）ATTR（'数据目标'）;
            。VAR ITEM_COUNT = $（'div.item'）的长度;
            如果（ITEM_COUNT＆GT; datatarget）
            {
                而（ITEM_COUNT＆GT; datatarget）{
                    $（'div.item：最后的孩子）toggleClass（隐藏）。
                    。ITEM_COUNT = $（'div.item'）的长度;
                }
            }
            如果（ITEM_COUNT＆LT; datatarget）
            {
                $（'div.item.hide'）toggleClass（隐藏）。
                而（ITEM_COUNT＆GT; datatarget）{
                    $（'div.item：最后的孩子）toggleClass（隐藏）。
                    。ITEM_COUNT = $（'div.item'）的长度;
                }
            }
        }
        如果（列表CLNAME =='方向'）
        {
            方向= $（本）.attr（数据目标）;
            datatarget =（last_selector == NULL）？ last_selector：'价格';
            $（'div.item'）tsort的（{顺序：方向，ATTR：datatarget +' - 数据'}）;
        }
        返回last_selector;
    }）;
}）;

和HTML

下拉选择申报单（提供了 datatarget 的点击功能）： 

 ＆LT;一个数据下拉=方向级=按钮，下拉菜单＆gt;方向订单和LT; / A＆GT;
＆LT; D​​L ID =方向数据下拉列表，内容类=分导航方向F-下拉内容＆GT;
  ＆LT; D​​T＆GT;＆LT;强＆gt;方向：LT; / STRONG＆GT;＆LT; / DT＆GT;
  ＆LT; D​​D类=主动＆GT;＆LT;一类=方向数据目标=降序＆GT;羽绒及LT; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=方向数据目标=ASC＆GT;最多＆LT; / A＆GT;＆LT; / DD＆GT;
＆LT; / DL＆GT;＆下;一个数据下拉=滤波器的类=按钮下拉过滤器过滤结果片剂; / A＆GT;
＆LT; D​​L ID =过滤器的数据下拉列表，内容类=分导航滤波器F-下拉内容＆GT;
  ＆LT; D​​T＆GT;＆LT;强大的过滤器过滤结果：筛; / STRONG＆GT;＆LT; / DT＆GT;
  ＆LT; D​​D类=主动＆GT;＆LT;一类=过滤器的数据目标=新＆GT;最新＆LT; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=过滤器的数据目标=endsoon＆GT;不久＆LT结束; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=过滤器的数据目标=储备＆GT;没有储备与LT; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=过滤器的数据目标=buyitnow＆GT;立即购买＆LT; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=过滤器的数据目标=所有＆GT;所有＆LT; / A＆GT;＆LT; / DD＆GT;
＆LT; / DL＆GT;＆LT;一个数据下拉=排序由级=按钮，下拉菜单＆GT;排序＆LT; / A＆GT;
＆LT; D​​L ID =排序由数据下拉列表，内容类=子导航排序F-下拉内容＆GT;
  ＆LT; D​​T＆GT;＆LT;强＆GT;分类：＆LT; / STRONG＆GT;＆LT; / DT＆GT;
  ＆LT; D​​D类=主动＆GT;＆LT;一类=之类的数据目标=结束＆GT;结束时间＆LT; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=之类的数据目标=价＆GT;价格＆LT; / A＆GT;＆LT; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=之类的数据目标=卖方＆GT;卖家信誉＆LT; / A＆GT;＆LT; / DD＆GT;
＆LT; / DL＆GT;＆LT;一个数据下拉=效果的每个级=按钮，下拉菜单＆GT;每页搜索结果＆LT; / A＆GT;
＆LT; D​​L ID =结果，每个数据下拉列表，内容类=＆GT每架F-下拉内容分导航;
  ＆LT; D​​T＆GT;＆LT;强＆GT;每页：LT; / STRONG＆GT;＆LT; / DT＆GT;
  ＆所述峰; dd类=活性＆GT;＆下;每个数据目标=100＆GT一类=; 100℃; / A＆GT;＆下; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=每个数据目标=75＆GT; 75℃; / A＆GT;＆LT; / DD＆GT;
  ＆所述峰; dd＆GT;＆下;类别=每个数据目标=50→50＆下; / A＆GT;＆下; / DD＆GT;
  ＆LT; D​​D＆GT;＆LT;一类=每个数据目标=25＆GT; 25℃; / A＆GT;＆LT; / DD＆GT;
＆LT; / DL＆GT;


解决方案

由于barmar的帮助下，我回答我自己的问题。

我很困惑，因为我并没有意识到，这个将反弹里面的每个（）。

下完成改变当前过滤器，首先取消隐藏任何隐藏的元素，然后将新的过滤器的我的目标。

 如果（列表CLNAME =='过滤器'）
{
    $（'div.item.hide'）toggleClass（隐藏）。
    last_selector =（last_selector == NULL）？ last_selector：$（'＃排序dd.active＆gt;一种'）ATTR（'数据目标'）;
    $（'div.item'）。每个（函数（）{
        （$（本）.attr（datatarget +' - 数据'）== 0）？ $（本）.hide（）：假的;
    }）;
}

当然，这只能满足基本的功能。我还是要修改它保持每页规则的结果。

I'm several hours into building a simple sortable search results for an online merchant site. The way it works, is that a html template is fetched of the search page, while the search is carried out with ajax. the json data is retrieved, and the div elements are then created. I have already completed the sort,per, and direction sorts, but now i'm stuck on the filter sort and i really have no idea where to even begin on this last one.

the last sort function needs to iterate over each div, checking the selected attribute for a 1 or a 0. if the attribute is 0, the hide class needs to be toggled for the div.

My question is:

  • how to access current selected div inside of each()
  • how to check if the datatarget is equal to 0. hide it if it is 0, or
  • how to continue to next iteration of each() if it is not.

a brief pseudocode of what i'm trying to achieve:

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

Here's my full jQuery code:

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

and the html

the dropdown selection divs(provides the datatarget for the click functions):

<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>

解决方案

Thanks to the help of barmar, i answered my own question.

i was confused because i didn't realize that this would be rebound inside of each().

the following accomplishes my goal, of changing the current filter, by first unhiding any hidden elements, then applying the new filter.

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

Of course, this only addresses the basic functionality. i still have to modify it to maintain the results per page rules.

这篇关于jQuery中过滤的div并隐藏他们基于自定义数据属性标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆