Question

我有很多过滤器可以在我的商店中展示产品。我正在使用bootstrap-select设置过滤器的样式（下拉列表）。

当我更改过滤器值时，如果该组合没有可用结果，其他过滤器将自动隐藏选项。

问题是，现在有一个重新过滤器，显示没有任何可用选项可供选择。在这种情况下，我想完全隐藏筛选器。

如果有可用选项，则代码如下所示：

<div class="form-group ">
  <label>Serie</label>
  <div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-serie" title="Bitte wählen..." aria-expanded="true">
  <span class="filter-option pull-left">Bitte wählen...</span>
  <span class="bs-caret">
    <span class="caret"></span>
  </span>
  </button>
    <div class="dropdown-menu open" role="combobox">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="true">
        <li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">D-9</span><span class="fontawesome fa fa-check check-mark"></span></a></li>
      </ul>
    </div>
    <label class="custom-select">
      <select id="wpv_control_select_wpcf-serie" name="wpv-wpcf-serie[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
        <option value="D-9">D-9</option>
      </select>
      <span></span>
    </label>
  </div>
</div>

如果没有可用的选项，则代码如下所示：

<div class="form-group">
  <label>Passend für Helm</label>
  <div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open">
    <button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true">
      <span class="filter-option pull-left">Bitte wählen...</span>
      <span class="bs-caret">
        <span class="caret"></span>
      </span>
    </button>
    <div class="dropdown-menu open" role="combobox">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
    </div>
    <label class="custom-select">
      <select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
      </select>
      <span></span>
    </label>
  </div>
</div>

我的目标是在子.hide-filter没有.form-group的情况下向.dropdown-menu添加类li

Answer 1

尝试下面的代码，您可以在其中迭代每个表单组，并查找其中是否包含没有li的下拉列表。

$(function(){
  $('.form-group').each(function(){
     var $dropdown = $(this).find('.dropdown-menu');
     if($dropdown.find('li').length==0) {
        $(this).addClass('hide-filter');
     }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Passend für Helm</label>
  <div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true"><span class="filter-option pull-left">Bitte wählen...</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
    <div
      class="dropdown-menu open" role="combobox">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
  </div><label class="custom-select"><select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98"></select><span></span></label></div>
</div>

Answer 2

这是另一种方法：

$( document ).ready(function() {
    if($( ".dropdown-menu.inner:has(li)" ).length == 0){
      $( ".form-group" ).addClass( "hide-filter" );
    }
});

如果类的跨度为子类，则将类添加到父div

2 个答案: