在jQuery中过滤div并基于自定义数据属性标签将其隐藏

r3wt

我花了几个小时为在线商人站点构建简单的可排序搜索结果。它的工作方式是从搜索页面中获取html模板,而使用ajax进行搜索。检索json数据,然后创建div元素。我已经完成了sortperdirection排序,但是现在我陷入了困境filter,我真的不知道从哪一个开始。

最后一个排序函数需要遍历每个div,检查所选属性的1或0。如果属性为0,则hide需要为div切换类。

我的问题是:

  • 如何访问其中的当前选定的div 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(为datatargetclick函数提供):

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

多亏了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;
    });
}

当然,这仅解决基本功能。我仍然必须修改它以维持每页结果的规则。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从 <img 标签上的自定义属性中获取数据

来自分类Dev

jQuery验证:在自定义div中显示错误标签

来自分类Dev

如何基于Angular js中的两个自定义过滤器过滤数据

来自分类Dev

脚本标签中的自定义属性

来自分类Dev

Xamarin IOS在自定义渲染器中基于IsFocused属性隐藏搜索栏图标

来自分类Dev

从jQuery中的锚点发送自定义数据属性

来自分类Dev

jQuery从自定义属性中获取多个数据

来自分类Dev

基于Shortcode属性剥离自定义字段标签的Shortcode

来自分类Dev

数据属性的jQuery自定义事件

来自分类Dev

在div中定位自定义属性

来自分类Dev

使用 jquery 获取 <ul> 标签中存在的自定义属性值

来自分类Dev

C#基于对自定义属性的过滤返回[Description]属性

来自分类Dev

如何在scriptlet中访问自定义标签的属性?

来自分类Dev

基于输入数据的Keras中的自定义损失函数

来自分类Dev

在自定义数据属性中定义的样式文本

来自分类Dev

自定义控件自定义标签“for”属性放置

来自分类Dev

在选项中包含数据的自定义标签

来自分类Dev

如何在图表中自定义样式数据标签?

来自分类Dev

数据透视表中的自定义行标签

来自分类Dev

从滑块jquery ui中的元素数据属性设置自定义值

来自分类Dev

使用Jquery Datatables对数据排序属性中的值进行自定义排序

来自分类Dev

从滑块jquery ui中的元素数据属性设置自定义值

来自分类Dev

使用 JQuery 中的自定义数据属性将 css 应用于 tr

来自分类Dev

用jQuery计算自定义数据属性的长度

来自分类Dev

Magento自定义属性标签

来自分类Dev

是否可以将 PRE_SET_DATA 事件中的自定义数据属性设置为表单标签本身?

来自分类Dev

EF数据库中的自定义属性优先

来自分类Dev

React中真实的自定义属性(例如微数据)

来自分类Dev

微风元数据中的自定义属性

Related 相关文章

  1. 1

    从 <img 标签上的自定义属性中获取数据

  2. 2

    jQuery验证:在自定义div中显示错误标签

  3. 3

    如何基于Angular js中的两个自定义过滤器过滤数据

  4. 4

    脚本标签中的自定义属性

  5. 5

    Xamarin IOS在自定义渲染器中基于IsFocused属性隐藏搜索栏图标

  6. 6

    从jQuery中的锚点发送自定义数据属性

  7. 7

    jQuery从自定义属性中获取多个数据

  8. 8

    基于Shortcode属性剥离自定义字段标签的Shortcode

  9. 9

    数据属性的jQuery自定义事件

  10. 10

    在div中定位自定义属性

  11. 11

    使用 jquery 获取 <ul> 标签中存在的自定义属性值

  12. 12

    C#基于对自定义属性的过滤返回[Description]属性

  13. 13

    如何在scriptlet中访问自定义标签的属性?

  14. 14

    基于输入数据的Keras中的自定义损失函数

  15. 15

    在自定义数据属性中定义的样式文本

  16. 16

    自定义控件自定义标签“for”属性放置

  17. 17

    在选项中包含数据的自定义标签

  18. 18

    如何在图表中自定义样式数据标签?

  19. 19

    数据透视表中的自定义行标签

  20. 20

    从滑块jquery ui中的元素数据属性设置自定义值

  21. 21

    使用Jquery Datatables对数据排序属性中的值进行自定义排序

  22. 22

    从滑块jquery ui中的元素数据属性设置自定义值

  23. 23

    使用 JQuery 中的自定义数据属性将 css 应用于 tr

  24. 24

    用jQuery计算自定义数据属性的长度

  25. 25

    Magento自定义属性标签

  26. 26

    是否可以将 PRE_SET_DATA 事件中的自定义数据属性设置为表单标签本身?

  27. 27

    EF数据库中的自定义属性优先

  28. 28

    React中真实的自定义属性(例如微数据)

  29. 29

    微风元数据中的自定义属性

热门标签

归档