如何使用javascript实时动态计算元素/类的长度

Question

>假设有一个类名为"item"的"5"div，并且实时动态添加具有相同类名"item"的新"n"个div...我的结果应该显示当时存在的div 总数(即 5 + n(。

注意：不存在单击或悬停事件。

<div class="wrapper">
      <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
      <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
      <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
      <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
      <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
</div>
<script>
var numItems = $('.item').length;
console.log(numItems);
</script>

这仅在第一次加载时给出结果，但我要求的结果必须是实时动态的。

Answer 1

您可以使用

突变观察器观察父节点wrapper的变化，然后在 DOM 元素发生突变时触发callback函数。

有关示例，请参阅下面的代码。

const callback = () => {
  var numItems = $('.item').length;
  console.log(numItems);
};
const targetNode = $('.wrapper').get(0);
const config = {
  attributes: true,
  childList: true
};
// Setup the observer on the wrapper node
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
// Display value initially
callback();
// Function to dynamically insert more nodes
setInterval(() => {
  const node = $("<div>").attr('class', 'item');
  $('.wrapper').eq(0).append(node);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
  <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
  <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
  <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
  <div class="item"><img src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940g"></div>
</div>

请务必查看突变观察者的Browser_compatibility列表。