0

我正在编写一个简单的函数，它将使用从服务器推送的数据更新页面。为了简单起见，我使用计时器来模拟服务器推送。

每次推送服务器消息时，我都想更新页面上显示的列表，新收到的消息位于列表顶部，最早的消息被丢弃。

这是我到目前为止所拥有的：

<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>

我有两个问题：

  1. 我如何正确实现这一点（我不是真正的 JQuery 专家）
  2. 如何修改函数update_list()以便我可以向它传递一个新文本（例如随机文本），以便它更好地模拟服务器推送的数据？
4

2 回答 2

2

这是一个基于您的代码的基本示例，它删除列表中的最后一个元素并在列表顶部添加一个新元素

// 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')
}

除此之外，如果你想用随机数据改进你的模拟，你可以做这样的事情

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展示了这个工作的随机方面

于 2012-08-08T15:11:23.410 回答
0

所以，听起来你在 jQuery 中需要一点 101。互联网上充满了资源，在您阅读完这篇文章后，我希望您能通过一些关于$.

jQuery 最基本（也是最常见的）用途之一是获取 DOM 元素，而无需使用冗长的document.getElementById("id"). 对于 jQuery，我们可以简单地说$("#id")（注意：井号让 jQuery 知道它正在寻找对象 ID，这很重要）。两者都getElementById返回$对象，但其中getElementById返回一个 DOM 元素，$返回一个 jQuery 对象。在这种情况下，我们对使用 jQuery 函数感兴趣，prepend()该函数与 xHTML 在 DOM 元素中的 append 函数具有相似的功能（xHTML 之外的支持充其量是 janky），只有 append 将其参数作为最后一个子元素添加，prepend 添加它们作为第一个。

$().prepend()超级好用。它在其父对象中的任何现有内容之后添加它的参数。参数可以是 DOM 元素、jQuery 对象或字符串（任何字符串）。在这种情况下，字符串就可以了。

function update_list(newtext)
{
    $("#lst").prepend("<li>" + newtext + "</li>");
}

此代码将创建一个新的 jQuery 对象来代表您<ul>的 id lst（记住：磅符号！）并要求它<li>在其newtext内容之前添加一个新对象。

于 2012-08-08T15:27:15.587 回答