jQuery：动态更新N个最新值的列表 [英] jQuery: dynamically updating a list of N latest values
问题描述
我正在编写一个简单的函数，它将使用从服务器推送的数据更新页面。为了简单起见，我使用计时器来模拟服务器推送。
I am writing a simple function that will update a page with data pushed from the server. For the sake of simplicity, I am using a timer to simulate the server push.
每次推送服务器消息时，我想更新页面上显示的列表，新收到的消息放在列表的顶部，最早的消息被删除。
Each time a server message is pushed, I want to update the list shown on the page, with the newly received message placed at the top of the list, and the earliest one being dropped of the list.
这是我到目前为止所拥有的：
This is what I have so far:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="main_cntr">
<ul id="lst">
<li>Line 1 ....</li>
<li>Line 2 ....</li>
<li>Line 3 ....</li>
<li>Line 4 ....</li>
<li>Line 5 ....</li>
</ul>
<div>
</body>
<script type="text/javascript">
// mimics server side push message received at front end
// update list to contain only the last 5 elements
function update_list(newtext){
// Fetch li elements in $('#lst')
// truncate last one
// insert new text to top of li list (ideally, I want to pass the new text to insert to this function)
alert('Got called')
}
$(document).ready(function() {
window.setInterval(update_list, 10000);
});
</script>
</html>
我有2个问题：
- 如何正确实现这一点（我不是真正的JQuery专家）
- 如何修改函数
update_list（）以便我可以传递一个新文本（例如随机文本），以便更好地模仿服务器推送的数据？
- How do I implement this correctly (I'm not really a JQuery expert)
- How do I modify the function
update_list()so that I can pass it a new text (e.g. random text), so that it better mimics data being pushed by the server?
推荐答案
这是一个基于你的代码的基本示例，它删除列表中的最后一个元素并在列表顶部添加一个新元素
Here is a basic example based on your code which removes the last element in the list and adds a new one to the top of the list
// mimics server side push message received at front end
// update list to contain only the last 5 elements
function update_list(newtext){
// Fetch li elements in $('#lst')
// truncate last one
$('#lst li').last().remove()
// insert new text to top of li list (ideally, I want to pass the new text to insert to this function)
$('#lst').prepend("<li>"+newtext+"</li>");
alert('Got called')
}
进一步如果你想用随机数据改进你的模拟你可以做这样的事情
Further to this if you wanted to improve your simulation with random data you could do something like this
var wordArray = ["hey", "you", "there"];
function RandomWord() {
var i = Math.floor((Math.random() * wordArray.length));
return wordArray[i];
}
然后替换 update_list中的行是这个
$('#lst').prepend("<li>"+RandomWord()+"</li>");
最后这里是 jsFiddle 显示此工作的随机方面
Lastly here is a jsFiddle showing the random aspect of this working
这篇关于jQuery：动态更新N个最新值的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
