jQuery — загрузка div с большим набором данных последовательно

#javascript #jquery

#javascript #jquery

Вопрос:

Я использую jQuery для загрузки <div> элемента с большим набором данных.

Базовая архитектура — это, Node.js использование веб-сокетов отправляет некоторые данные во внешний интерфейс в виде JSON. Я хочу отобразить эти детали внутри <div> элемента.

 $("#myDiv ul").append("<li>my test1</li>");
 

Я вызываю приведенный выше код внутри цикла for на основе длины массива и изменяю напечатанное сообщение:

 data.forEach(function(e,i){
    $("#myDiv ul").append("<li>"   e.msg   "</li>");
})
 

CSS:

 #myDiv {
display:block;
width:20%;
height:60%;
overflow:hidden
}
 

Проблема в том, что код работает, новое <li> добавляется к последнему. Но div не показывает последнее содержимое. Он показывает только старое содержимое.

Я хочу создать интерфейс, похожий на чат, где при добавлении нового сообщения старый контент прокручивается вверх, а новый контент отображается пользователю.

Более старые <div> должны продолжать прокручиваться вверх и исчезать после 1000 сообщений. Как добиться этого в javascript?

Комментарии:

1. Вы можете использовать prepend вместо append $(«#myDiv ul»).prepend(«<li>» e.msg «</li>»);

2. Если я правильно понял вопрос, вы, вероятно, хотите этого: github.com/litera/jquery-scrollintoview

3. Я хочу что-то похожее на приложение для чата. но вместо ввода пользователем я буду динамически обновлять содержимое из базы данных.

4. Я хочу создать эффект, подобный, есть div, я всегда добавляю какое-то сообщение внизу. Все div сверху должны двигаться вверх. это похоже на нажатие и всплывание массива. Как только предел достигнут, div должен удалить верхний div и заменить его следующим преемником.