时间戳

首页 > 解决方案 > 删除后如何获取div的数量？

javascript - 删除后如何获取div的数量？

问题描述

在我的 HTML 中有八个div. 我能够使用 jQuery 获取 div 的编号并将其插入到.num div元素中。

但是，当我div通过单击删除按钮删除其中一个时，span通过 jQuery 检索到的 div 数不会更新为当前剩余的 div 数。它仍然会显示8。

div单击按钮后，如何立即获取 DOM 中剩余的当前元素数量？

setTimeout(() => {
  if ($(".delete div").length > 0) {
    $(".num span").html($(".delete div").length);
  }
}, 100);

$("button").click(function() {
  $(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

标签： javascripthtmljquery

解决方案

问题是因为您使用的是setTimeout()，它只在指定的延迟后运行一次。

对于您用于工作的模式，您需要setInterval()改用它，它将在设定的延迟时间重复运行：

setInterval(() => {
  if ($(".delete div").length > 0) {
    $(".num span").html($(".delete div").length);
  }
}, 100);

$("button").click(function() {
  $(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

但是，为此使用计时器并不理想。由于div元素的数量仅在单击按钮时受到影响，因此只需更新该.num span事件处理程序中的元素：

var $span = $(".num span").html($(".delete div").length);

$("button").click(function() {
  $(".delete div:last-child").remove();
  $span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

推荐阅读