Ограничение максимального количества элементов внутри потоковых данных Div - FIFO

#javascript #jquery #bootstrap-4

Вопрос:

Мой сценарий заключается в том, что я передаю данные в строки для отображения внутри div.

Поэтому для каждой строки, которую я получаю, я создаю диапазон, а затем добавляю его.

Однако я хочу ограничить div максимум 100 строками / элементами диапазона.

Поэтому, если я получаю новые данные, самый старый элемент удаляется, чтобы освободить место для нового элемента.

Любые советы о том, как реализовать это с помощью jquery?

Это мой текущий код, просто добавляю.

 dlogsocket.onmessage = function (event) {
    $("#ws-dlog-data").append(event.data);
};

Ответ №1:

Вы должны подсчитать, сколько элементов присутствует, и удалить первый, который должен быть самым старым, используя .first() .

 dlogsocket.onmessage = function (event) {
  $("#ws-dlog-data").append(event.data);

  // If more than 100 spans, remove the first (oldest).
  if( $("#ws-dlog-data span").length >100 ){
    $("#ws-dlog-data span").first().remove();
  }
};

Ответ №2:

Вы можете проверить количество дочерних элементов и, если оно уже равно 100, удалить первый, прежде чем добавлять новый:

 dlogsocket.onmessage = function (event) {
   var $container = $("#ws-dlog-data");
   while ($container.children().length >= 100)
      $container.children().first().remove();
   $("#ws-dlog-data").append(event.data);
};