Question

我正在使用jquery .filter（）来过滤页面中的某些产品.Dom结构看起来像这样..

   <body>
    <ul class='products'>
    <li class='product' data-company="something" data-shape="cake" data-flavour="something"></li>
     .
     .
     .
     .
     .
     <li class='product' data-company="something" data-shape="cake" data-flavour="something"></li>
     </ul>
    </body>

我的过滤器包含复选框，因此如果选中任何人，它会调用我的类来启动我的过滤器功能。

My filter function looks something likes this
    this.filterGridProducts = function() {
        //hide all
    _this.products.hide();
    var filteredProducts = _this.variants;
    //filter by colour, size, shape etc

    var filterAttributes = $('input[type="checkbox"]'); 
     var selectedFiltersValues = [];
    // for each attribute check the corresponding attribute filters selected
    filterAttributes.each(function(){ 
      if(this.checked)
      {
           var currentFilter = $(this);
           console.log(currentFilter);
            selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
            filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
      }
    });
    //console.log(filteredProducts.parent());
   filteredProducts.parent().show();

  };

filteredProducts.parent().show();此行向我显示了我甚至不想要的所有结果。

当我console.log filteredProducts时，它会向我显示我需要的内容，我应该怎么做才能向我展示filterProducts包含的内容？

注意：无论何时加载页面，都会显示所有项目。如果有人需要别的东西，请告诉我。

Answer 1

你可以做这样的事情

  filteredProducts.parent().show();
  $('ul.products').children().not(filteredProducts).hide();

实际发生的是，它显示了父元素及其所有子元素。您可以使用jquery api中的.not()来选择除了你想要的那个，然后在那些选定的项目上使用隐藏。我不知道任何其他jquery函数直接输出所选项目，但对于你的情况，这种解决方案最合适。

我也对任何其他建议持开放态度。

显示过滤的项目jquery

1 个答案: