Как проверить количество абзацев внутри div и удалить некоторые из них, используя jQuery?

Question

Я новичок в jQuery и добавляю некоторые абзацы динамически с сокетом внутри div, поэтому я хочу знать, превышает ли количество абзацев определенное количество. Если количество абзацев превысит, скажем, 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()
    }
});

Это правильный подход?

Answer 1

Вот пример кода, чтобы сделать то, что вы описываете:

(Я заменил response.on кнопкой, которая добавляет абзацы вручную, просто для проверки концепции. Вы можете переместить код, который удаляет первый элемент в вашей функции обратного вызова.)

let counter = 0;

$("button").on("click", function() {

      $("div.paragraphs").append(
        '<p>Text' +  (counter++) + '</p>'
      );


    if ( $("div.paragraphs p").length > 10 ){
      $("div.paragraphs > p:first").remove()
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<div class="paragraphs"></div>

Codepen

Answer 2

Может быть, что-то вроде этого, мой код комментариев:

socket.on("response", function (text) {
  $("div.paragraphs").append(
    '<p>' + text + '</p>'
  ); //now here... this means if you insert a new element and it is the 11nth, it will get erased... maybe you meant prepend?
  maintain_ten_elements(); //this is here since I assume you want the div never to be past 10.
});

 function maintain_ten_elements(){
    $("div.paragraphs p:nth(9)").nextAll().remove(); //sexy single line of code, takes the the 10nth element (9, because it starts from 0) and then takes all the elements after it (11 and on) and removes them.
}

Answer 3

Событие change не сработает при изменении элементов - оно сработает только при изменении значений элементов типа ввода . Хотя вы можете наблюдать изменения с помощью MutationObserver, было бы гораздо элегантнее запустить средство проверки абзацев после добавления абзаца (или после добавления всех абзацев, если они объединены в пакет).

Поскольку он выглядит как одиночный new <p> добавляется к каждому сообщению сокета, вы можете сохранить промежуточное количество до <p> s, добавленных до сих пор, и как только оно достигнет предела, запустите $("div.paragraphs > p:first-child").remove(), чтобы удалить первый <p> (самый старый one):

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>