Jquery 元素的高级过滤

Jquery advanced filtering of elements

本文关键字：过滤 高级 元素 Jquery      更新时间：2023-09-26

我有大量带有数据属性的元素列表。 

<ul>
   <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">
   <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">
   <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">
   <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">
   <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">
   <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">
</ul>

在页面顶部，我有一个表单，其中包含每个属性的每个选项的复选框。他们可以为每个数据属性选择多个选项。因此，例如，如果他们选择了brandsid的2和5，finishid的1和4，typeid的4和2以及constructionid的1和14，伪代码（SQL风格）将如下所示：

AND (brandid = 2 OR brandid = 5)
AND (finishid = 1 OR finishid = 4)
AND (typeid = 4 OR typeid= 2)
AND (constructionid = 1 OR 14)

但我不确定如何将其转换为 jquery 选择器。

谢谢。

我刚刚写了一个这样的过滤器，如果你知道如何开始，它实际上很容易。

我们假设每个有源滤波器都有一个 class="active" .我们进一步假设每个复选框都有一个保存过滤器名称的数据属性（例如 data-filter="brandid" 和保存应选择的值的数据属性（例如 data-value="1" ）。

这假设我们可以开始构建函数

$items = $('li');
// Whenever a user changes a checkbox we want to filter our data
$('input[type="checkbox"]').change(function(){
    // We toggle the active-class to dis/enable our filter
    $(this).toggleClass('active');
    // We need an object holding our filters
    var filter = {};
    var $filtered = $items;
    // We select all active filter here and push them to the array
    $('input[type="checkbox"].active').each(function(){
        // When a filter with this type didnt exists in our object we create a new one
        if(filters[$(this).data('filter')] === undefined) filters[$(this).data('filter')] = {};
        // Then we push the filter to our array
        filters[$(this).data('filter')].push($(this).data('value'));
    });
    // We loop through every filter, select all elements which match the
    // filter and apply it to the $filtered selection
    // The items left is the desired collection
    for(var i in filters){
        // For every filter in our object
        // (which can hold multiple filters of one type)
        // we build a selector.
        // We join the selectors using `,` to get an `or`-selection
        selector = filters[i].map(function(value){
            return '[data-'+i+'="'+value+'"]';
        }).join(',');
        // Apply the filter
        $filtered = $filtered.filter(selector);
    }
    // $filtered now holds all elemets left
    // do with this elements what you want
}

你可以在jQuery中使用这样的模式 - 

$('li[data-brandid^=1][data-finishid^=5]')

它相应地查找由 1 和 5 组成的属性。

这是您可以使用的代码片段 - 

var choose = function(brandId, finishId, typeid, constructionid){
  // Search through brandid and finishid
  var sel = $('li[data-brandid^=' + brandId + '][data-finishid^='+ finishId +'][data-typeid^='+ typeid +'][data-constructionid^='+ constructionid +']')
  $('div').append(sel);
};
$('#go').on('click', function(){  
  var brandIds = [];
  var constructionIds = [];
  var typeIds = [];
  var finishIds = [];
  
  if($('#brandid').val().indexOf(',') != -1)
    brandIds = $('#brandid').val().split(',');
  
  if($('#finishid').val().indexOf(',') != -1)
    finishIds = $('#finishid').val().split(',');
  
  if($('#typeid').val().indexOf(',') != -1)
    typeIds = $('#typeid').val().split(',');
  
  if($('#constructionid').val().indexOf(',') != -1)
    constructionIds = $('#constructionid').val().split(',');
  
  
      
  $.each(brandIds, function(brInd, brand){
    $.each(finishIds, function(finId, finish){
      $.each(typeIds, function(typeId, type){
        $.each(constructionIds, function(conId, construction){
          choose(brand, finish, type, construction);
        });
      });          
    });    
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Brand ID <input type="text" id="brandid" />
Finish ID <input type="text" id="finishid" />
Type ID <input type="text" id="typeid" />
Construction ID <input type="text" id="constructionid">
<button id="go">Go!</button>
<br/><br/>
Available (Brand - Finish - Type - Construction)
<ul>
  <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">1 - 5 - 10 - 14</li>
  <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">4 - 1 - 3 - 7</li>
  <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">18 - 2 - 1 - 4</li>
  <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">7 - 4 - 4 - 5</li>
  <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">4 - 8 - 1 - 2</li>
  <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">2 - 12 - 2 - 16</li>
</ul>
Selected (Brand - Finish - Type - Construction)
<div id="selected"></div>

编辑：对于多个值，使用 $.each

相关文章：