0

Пытаюсь доработать фильтр товаров вукормерс-вордпресс.

Задача ( разметке указал )

1) если в span имеем значение 0(ноль), то нужно скрыть именно родительский li

2) если во всех li-span находящихся в родительском блоке class="woof_container woof_container_checkbox woof_container_pa_цвет woof_container_3 woof_container_" имеются ноли, то мы скрываем этот div полностью.

  • знаний не хватает , спасибо.

Надеюсь на доброго человека.

Имеем такую разметку

<div data-css-class="woof_container_pa_цвет" class="woof_container woof_container_checkbox woof_container_pa_цвет woof_container_3 woof_container_">
<!-- ##  скрыть это если везде ноли. , класс этого дива у всех блоков одинаковый, отличие только по  <b>data-css-class</b>   ## --> 
            <div class="woof_container_overlay_item"></div>
            <div class="woof_container_inner woof_container_inner_"><!-- ##   или это   ## --> 
        <h4>  Цвет  </h4>
                  <div class="woof_block_html_items">
                            <ul class="woof_list woof_list_checkbox"> 
<!-- ##   имеем неопределенное количество li - _76 _77 _78 и т.д.   ## --> 
                                   <li class="woof_term_76 ">
                                         <div class="icheckbox_flat-aero disabled" >
                                                 <input type="checkbox" disabled="" id="woof_76_5d9500e8515f1" class="woof_checkbox_term woof_checkbox_term_76" data-tax="pa_цвет" name="красный" data-term-id="76" value="76" >
                                                  <ins class="iCheck-helper" ></ins>
                                          </div>
                                                  <label class="woof_checkbox_label " for="woof_76_5d9500e8515f1">красный
<!-- ##   если здесь ноль  то скрыть  li class="woof_term_76 " ## --> <span class="woof_checkbox_count">(0)</span>
                                                   </label>
               <input type="hidden" value="красный" data-anchor="woof_n_pa_цвет_красный">
                                 </li>
<!-- ##   имеем неопределенное количество li - _76 _77 _78 и т.д.   ## -->                   
                                  <li class="woof_term_75 ">
                                       <div class="icheckbox_flat-aero disabled" >
                                             <input type="checkbox" disabled="" id="woof_75_5d9500e852267" class="woof_checkbox_term woof_checkbox_term_75" data-tax="pa_цвет" name="черный" data-term-id="75" value="75" >
                                              <ins class="iCheck-helper" ></ins>
                                      </div>
                                               <label class="woof_checkbox_label " for="woof_75_5d9500e852267">черный
<!-- ##   если здесь ноль  то скрыть  li class="woof_term_75 " ## --> <span class="woof_checkbox_count">(0)</span>
                                                </label>
                                                   <input type="hidden" value="черный" data-anchor="woof_n_pa_цвет_черный">
                                    </li>
                              </ul>
                        </div>
              <input type="hidden" name="woof_t_pa_цвет" value="Товар Цвет"> 
            </div>
        </div>
<div data-css-class="woof_container_pa_цвет" class="woof_container woof_container_checkbox woof_container_pa_цвет woof_container_3 woof_container_">
<!-- ##  скрыть это если везде ноли. , класс этого дива у всех блоков одинаковый, отличие только по  <b>data-css-class</b>   ## --> 
            <div class="woof_container_overlay_item"></div>
            <div class="woof_container_inner woof_container_inner_"><!-- ##   или это   ## --> 
        <h4>  Цвет  </h4>
                  <div class="woof_block_html_items">
                            <ul class="woof_list woof_list_checkbox"> 
<!-- ##   имеем неопределенное количество li - _76 _77 _78 и т.д.   ## --> 
                                   <li class="woof_term_76 ">
                                         <div class="icheckbox_flat-aero disabled" >
                                                 <input type="checkbox" disabled="" id="woof_76_5d9500e8515f1" class="woof_checkbox_term woof_checkbox_term_76" data-tax="pa_цвет" name="красный" data-term-id="76" value="76" >
                                                  <ins class="iCheck-helper" ></ins>
                                          </div>
                                                  <label class="woof_checkbox_label " for="woof_76_5d9500e8515f1">красный
<!-- ##   если здесь ноль  то скрыть  li class="woof_term_76 " ## --> <span class="woof_checkbox_count">(0)</span>
                                                   </label>
               <input type="hidden" value="красный" data-anchor="woof_n_pa_цвет_красный">
                                 </li>
<!-- ##   имеем неопределенное количество li - _76 _77 _78 и т.д.   ## -->                   
                                  <li class="woof_term_75 ">
                                       <div class="icheckbox_flat-aero disabled" >
                                             <input type="checkbox" disabled="" id="woof_75_5d9500e852267" class="woof_checkbox_term woof_checkbox_term_75" data-tax="pa_цвет" name="черный" data-term-id="75" value="75" >
                                              <ins class="iCheck-helper" ></ins>
                                      </div>
                                               <label class="woof_checkbox_label " for="woof_75_5d9500e852267">черный
<!-- ##   если здесь ноль  то скрыть  li class="woof_term_75 " ## --> <span class="woof_checkbox_count">(0)</span>
                                                </label>
                                                   <input type="hidden" value="черный" data-anchor="woof_n_pa_цвет_черный">
                                    </li>
                              </ul>
                        </div>
              <input type="hidden" name="woof_t_pa_цвет" value="Товар Цвет"> 
            </div>
        </div>

1 ответ 1

0

На jQuery

// Перебираем контейнеры
$('.woof_container').each(function() {
    let self = $(this);
    // Перебираем span контейнера
    self.find('span').each(function() {
        let self = $(this);
        // Если значение внутри span равно 0, то удаляем его родителя li
        if (parseInt(self.html().replace(/[^0-9]+/g, '')) == 0) {
            self.closest('li').remove();
        }
    });
    // Если после проверки всех span они все были удалены, то удаляем контейнер
    if (self.find('span').length === 0) {
        self.remove();
    }
});

Но вообще такие вещи выполняются на этапе построения меню. Тем самым ненужное не создается вообще, а не удаляется после создания.

7
  • это из плагина фильтра товаров, проще мне кажется сделать этим скриптом чем лезть в сам плагин
    – grizar
    7 окт 2019 в 17:33
  • Да, и спасибо добрый человек.
    – grizar
    7 окт 2019 в 17:51
  • этот код скрывает блок в котом не только есть НОЛЬ , но также скрывает span в которых нет значений вообще никаких --- как это исправить, ----или ,как исключить из действия этого скрипта блок с классом reer , который также внутри woof_container
    – grizar
    7 окт 2019 в 22:11
  • $('.woof_container:not(.reer)').each(... 8 окт 2019 в 6:08
  • Только заметил что этот скрипт работает на моем домашнем компьютере , но не работает в мобильном телефоне, это из-за версии браузера(хром 42,0,2311,111) ? как это можно исправить ?
    – grizar
    8 окт 2019 в 18:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.