如果類的跨度為子類，則將類添加到父div

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" );
    }
});