带有jQuery和CSS类的HTML div过滤器

我有下面的过滤器，它正在我的页面中归档一些div 在这个时候它的工作，我有很多产品类别，需要过滤，我不想写在html的所有。 请检查以下内容，以便更好地理解

 <div id="stick-filter" class="filters panel-collapse collapse in">
    <div class="panel-content">
      <ul class="check-square filters-option">
        <li data-id="alfa 1,alfa 2,beta 1,beta 2" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
        <li data-id="alfa 1,alfa 2" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
        <li data-id="beta 1,beta 2" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>
      </ul>
    </div>
  </div>

过滤HTML

 <div id="stick-filter" class="filters panel-collapse collapse in">
    <div class="panel-content">
      <ul class="check-square filters-option">
        <li data-id="alfa 1,alfa 2,beta 1,beta 2" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
        <li data-id="alfa 1,alfa 2" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
        <li data-id="beta 1,beta 2" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>
      </ul>
    </div>
  </div>

是否有办法更改我的过滤器操作，如下所示，以避免在li数据id字段中写入所有产品类别

 <div id="stick-filter" class="filters panel-collapse collapse in">
    <div class="panel-content">
      <ul class="check-square filters-option">
        <li data-id="alfa 1,alfa 2,beta 1,beta 2" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
        <li data-id="alfa 1,alfa 2" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
        <li data-id="beta 1,beta 2" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>
      </ul>
    </div>
  </div>

<li data-id="**to show all the products**" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
<li data-id="**where the word alfa is found**" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
<li data-id="**where the word beta is found**" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>

您需要使用jQuery的

.filter（）

方法，如下所示：

 <div id="stick-filter" class="filters panel-collapse collapse in">
    <div class="panel-content">
      <ul class="check-square filters-option">
        <li data-id="alfa 1,alfa 2,beta 1,beta 2" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
        <li data-id="alfa 1,alfa 2" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
        <li data-id="beta 1,beta 2" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>
      </ul>
    </div>
  </div>

var id = 'example';

$('#product-list .col-sm-6')
    .filter(function () {
        return $(this).data('id').indexOf(id) >= 0;
    })
    .show();

---

在此示例中，将显示数据id为且包含示例短语的所有列表元素。

和li筛选器上的？是否希望它们都搜索值而不是检查？@我希望在选择Alfa li时显示包含Alfa In数据条的所有div

 <div id="stick-filter" class="filters panel-collapse collapse in">
    <div class="panel-content">
      <ul class="check-square filters-option">
        <li data-id="alfa 1,alfa 2,beta 1,beta 2" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
        <li data-id="alfa 1,alfa 2" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
        <li data-id="beta 1,beta 2" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>
      </ul>
    </div>
  </div>