如何用jQuery检查div内的段落数并删除部分段落?

我是一个新的jQuery用户,我在一个div里面用socket动态添加一些段落,所以我想知道段落的数量是否超过了一定的数量,如果超过了,比如10个,我想保留最后的10个,并删除其他的段落。如果段落数超过了,比如说10个,我想保留最后的10个,并删除其他段落。这就是我附加段落的方法。

socket.on("response", function (text) {
      $("div.paragraphs").append(
        '<p>' + text + '</p>'
      );
  });

这就是我的尝试

$("div.paragraphs").change(function () {
    const matched = $("p");
    console.log("Number of paragraphs in div = " + matched.length);
  });

但是,在控制台中没有任何显示 我想做这样的事情,但不知道我是否正确。

$("div.paragraphs").change(function () {
    const matched = $("p");
    if(matched.length){
      $('p:lt(matched.length-10)', 'div.paragraphs').remove()
    }
});

这是正确的方法吗?

解决方案:

change 时,事件不会发生。元素 改变–只有当类似输入元素的元素发生变化时,它才会启动。价值观 的变化。虽然你可以用MutationObserver来观察变化,但是在你添加一个段落后(或者在所有段落被添加后,如果是分批添加的话)启动段落检查器会更优雅。

因为它看起来像一个新的 <p> 被附加在每个套接字消息上,你可以保持一个运行的总数量的 <p>到目前为止,已经追加了很多,一旦达到极限,就运行 $("div.paragraphs > p:first-child").remove() 去掉第一个 <p> 最老的一个)。

let pCount = 0;
socket.on("response", function(text) {
  $("div.paragraphs").append(
    '<p>' + text + '</p>'
  );
  pCount++;
  if (pCount > 10) {
    $("div.paragraphs").first().remove();
  }
});

现场演示(使用 setInterval 而不是套接字)。)

let pCount = 0;
setInterval(() => {
  $("div.paragraphs").append(
    '<p>' + Math.random() + '</p>'
  );
  pCount++;
  if (pCount > 10) {
    $("div.paragraphs > p:first-child").remove();
  }
}, 400);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="paragraphs">
</div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

R中的字符串删除

2022-9-8 13:01:19

未分类

Api JSON 解码回复

2022-9-8 13:01:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索