Проверка содержимого div через jquery

199

11 мая 2018, 11:52

Задача - проверить пуст ли div ? Содержимое в div подгружается через ajax, по мимо этого есть скрипт которые при определённых условиях выводит звуковое оповещение. Собственно не могу понять как запретить скрипту запускать оповещение когда в div есть содержимое. Пытался сделать через такую конструкцию :

if($(".grid_call_main_orders_one_content").is(':empty')){
    var audio = new Audio(); 
    audio.src = 'alert.mp3';
    audio.autoplay = true;
   setTimeout(function () {
   alert('Новый заказ!Обновите страницу! ');
  }, 3000);
    }

Но схема не рабочая.

Answer 1

Можно через $('selector').text().length;

let a = $('#a').text().length; 
let b = $('#b').text().length; 
a > 0 ? alert ('a have value') : alert ('a empty'); 
b > 0 ? alert ('b have value') : alert ('b empty');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id='a'>hi</div> 
<div id='b'></div>

Answer 2

В JQuery есть метод .html() - он берет содержимое из элемента.
Принцип такой, берем содержимое и проверяем его на пустоту, пример:
$("here").html() == "";

var contentGridBlock = $(".grid_call_main_orders_one_content"); 
// Кнопки для теста 
$(".gridFull").click(function() { 
  contentGridBlock.html("Я наполнен"); 
}); 
$(".gridClear").click(function() { 
  contentGridBlock.html(""); 
}); 
$(".gridCheck").click(function() { 
  // Тут самое интересное 
  var checkContent = contentGridBlock.html(); 
  if(checkContent == "") { 
    alert("Блок пустой"); 
  } else { 
    alert("Блок с контентом"); 
  } 
});

button { 
  display: block; 
}

<div class="grid_call_main_orders_one_content"></div> 
<button class="gridCheck">Проверка контента</button> 
<button class="gridFull">Наполнить блок тестовым контентом</button> 
<button class="gridClear">Удалить из блока тестовый контент</button> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>