Как показать элемент, только если другой элемент содержит что-то, используя jQuery?

Question

Я предполагаю, что то, чего я хочу достичь, должно быть легким, но из-за недостатка знаний в области фронт-энда я не могу решить проблему.Есть страница, которая работает с AJAX-фильтрами, которые могут выбирать пользователи.Фильтры, которые в настоящее время применяются, отображаются в пределах <div> с id=current-filters.

HTML выглядит следующим образом:

<div id="current-filters-box">
    <div style="margin-bottom: 15px">
        <strong>Current filters:</strong>
        <div id="current-filters">
        <!-- here every single applied filter is displayed -->
        </div>
    </div>
</div>

Необходимо скрыть весь DIV current-filters-box, если фильтр не применяется.

На странице используется файл Javascript, bundle.js , который является крупным, но содержит следующую строку:

s=document.getElementById("current-filters")

Поэтому попытался скрыть следующий оператор if, чтобы скрытьDIV:

if(s.length<1)$('#current-filters-box').hide()

и

if(s=0)$('#current-filters-box').hide()

Но, похоже, это не имеет никакого эффекта.Может кто-нибудь сказать, что я сделал не так?

Демонстрацию страницы можно найти здесь

РЕДАКТИРОВАТЬ: это то, как HTML выглядит при применении фильтров:

<div id="current-filters-box">
<div style="margin-bottom: 15px">
    <strong>Current filters:</strong>
    <div id="current-filters">
        <div class="badge-search-public">
            <strong>Humanities &amp; Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
        </div>
        <div class="badge-search-public">
            <strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
        </div>
    </div>
</div>

Answer 1

Оба ваших условия неверны, или я бы сказал, что они не выполняют то, что, по вашему мнению, они делают.
s.length всегда печатает неопределенное значение, поэтому вместо s.length<1 вы можете использовать s.children.length

* 1006.* а второе не является условием, скорее это задание

s==0 // condition
s=0 //assignment

правильное условие для вашего требования будет

if(s.children.length<1){

Я выделил фрагменты для иллюстрации.

без фильтров

s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
  $('#current-filters-box').hide(1000)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
  filter box
  <div style="margin-bottom: 15px">
    <strong>Current filters:</strong>
    <div id="current-filters">
      <!-- here every single applied filter is displayed -->
    </div>
  </div>
</div>

Без фильтров

s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
  $('#current-filters-box').hide(1000)
}

<div id="current-filters-box">
  <div style="margin-bottom: 15px">
    <strong>Current filters:</strong>
    <div id="current-filters">
      <div class="badge-search-public">
        <strong>Humanities &amp; Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
      </div>
      <div class="badge-search-public">
        <strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
      </div>
    </div>
  </div>

Answer 2

Этого можно добиться, добавив собственную переменную, которая считает или поддерживает ваши примененные фильтры, например,

var applied_filter_count = 0;

при каждом применении фильтра

applied_filter_count++;
if(applied_filter_count) {
   $('#current-filters-box').show()
}

и при каждом применении фильтраудаляется

applied_filter_count--;
if(!applied_filter_count) {
   $('#current-filters-box').hide()
}

и по умолчанию current-filters-box должно быть display:none

Answer 3

Вы выполняете задание, попробуйте ..

if (s.children.length)

Answer 4

Используя vanilla JavaScript, вы можете проверить, пустой ли current-filters div или нет, и переключить родительский div current-filters-box следующим образом:

s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");

if(s.children.length<1) {
    t.style.display = 'none';
    // t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
    t.style.display = 'block';
    // t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}

Answer 5

Попробуй это.

if( $('#current-filters').is(':empty') ) {
    $('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")

    }