Как отслеживать состояние свойства DOM элемента?

Question

[BEKa T]

Внутри дива динамически добавляются/удаляются элементы и я хочу отслеживать значение childElementCount у него и показывать кол-во детей
$amountBoxes = $('.boxes')[0].childElementCount;

Как это можно сделать в jquery или предложите, пожалуйста, свои пути решения
Спасибо!

Answer 1

[Дима Паутов]

https://developer.mozilla.org/ru/docs/Web/API/Muta...

Answer 2

[maksam07]

var $boxes = $('.boxes');

$boxes.on('DOMNodeInserted DOMNodeRemoved', function() {
  var amountBoxes = $boxes[0].childElementCount;
  console.log('Количество дочерних элементов: ' + amountBoxes);
});

Comments

[BEKa T]

Firefox: Применение Mutation Events является устаревшим. Вместо них используйте MutationObserver.

[maksam07]

BEKa T,

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.target.classList.contains('boxes')) {
      var amountBoxes = mutation.target.childElementCount;
      console.log(amountBoxes);
    }
  });    
});

observer.observe($('.boxes')[0], { childList: true });

// Добавляем новый элемент
$('.boxes').append('<div>Новый элемент</div>');