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

假设有一个类名为“item”的'5'个div，并且实时动态添加了一个新的'n'个具有相同类名“item”的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>

var numItems=$（'.item'）.length；
console.log（numItems）；

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

您可以使用来观察父

包装器

节点的更改，然后在DOM元素发生变化时触发

回调

函数

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

const callback=（）=>{
var numItems=$（'.item'）.length；
console.log（numItems）；
};
const targetNode=$（'.wrapper'）.get（0）；
常量配置={
属性：正确，
儿童名单：对
};
//在包装器节点上设置观察者
const observer=新的MutationObserver（回调）；
observer.observe（targetNode，config）；
//初始显示值
回调（）；
//函数以动态插入更多节点
设置间隔（（）=>{
常量节点=$（“”）.attr（'class'，'item'）；
$（'.wrapper'）.eq（0）.append（节点）；
}, 1000);

什么是实时动态？添加新元素时重新运行该逻辑。要做到这一点，可以挂接添加元素的事件，或者使用MutationObserver。前者是目前为止最好的方法，如果可能的话，该div将根据选择的区域填充给用户，因此元素的数量可以更改，您可以作为建议使用或添加
setInterval
，这是完全不推荐的，除非您可以
clearInterval
，我不确定您的注释会调用它“不存在单击或悬停事件。”MutationObserver工作了…！！！工作了！！！我现在可以动态计算元素的数量并对其进行操作了…干杯！！！