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>

2 つの質問があります。

  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の最も基本的な（そして一般的な）使用法の1つは、長いを使用せずにDOM要素を取得することdocument.getElementById("id")です。jQueryを使用すると、簡単に言うことができます$("#id")（注：ポンド記号は、jQueryにオブジェクトIDを探していることを知らせます。これは重要です）。とは両方のオブジェクトをgetElementById返しますが、DOM要素を返す場合はjQueryオブジェクトを返します。この場合、jQuery関数を使用することに関心があります。これは、DOM要素でxHTMLのappend関数と同様の機能を持つ関数です（xHTMLの外部でのサポートはせいぜいぎこちないです）。最初に。$getElementById$prepend()

$().prepend()とても使いやすいです。親オブジェクト内の既存のコンテンツの後に引数を追加します。引数には、DOM要素、jQueryオブジェクト、または文字列（任意の文字列）を指定できます。この場合、文字列は問題なく機能します。

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

<ul>このコードは、あなたのIDを表す新しいjQueryオブジェクトを作成しlst（覚えておいてください：ポンド記号！）、その内容に新しい<li>ものを追加するように要求しnewtextます。

于 2012-08-08T15:27:15.587 に答える