1

サーバーから (Node.js と socket.io を使用して) 1 行のテキスト メッセージを定期的に受信し、スクロール DIV に追加する Web ベースのプログラムがあります。メッセージは単純なテキストです。たとえば、「入力スイッチが失敗しました」。

socket.on('statusMessage', function (newMessage) {
  $('#statusMessageDiv').append(newMessage + "<br>");
});

新しいメッセージが届いたときに古いメッセージを削除して、表示されるメッセージを最新の 200 程度に制限するにはどうすればよいですか?

4

4 に答える 4

3

メッセージを要素にラップし、要素を数え、200 を超える場合は、最後に追加されたもの (最初のもの) を削除します。

socket.on('statusMessage', function (data) {
    $('<p />', {text : newMessage}).appendTo('#statusMessageDiv');

    if ( $('p', '#statusMessageDiv').length > 200 )
        $('p', '#statusMessageDiv').first().remove();
});
于 2013-05-14T14:18:07.860 に答える
2

どうですか

$("#statusMessageDiv span:gt(200)").remove()(ゼロベースとして 199 かもしれません!)

statusMessageDiv に<span>タグが含まれていると仮定します。これは、最も古いものが山の一番下にあると仮定しました。

基本原則のフィドルの例: http://jsfiddle.net/9ZKXY/

編集:最初/最後の項目を削除して更新されたフィドル: http://jsfiddle.net/9ZKXY/1/

于 2013-05-14T14:22:15.157 に答える
1

または、メッセージの文字列値を含むデータ構造として JavaScript 配列を使用することもできます。ajax 呼び出しを実行して、JSON 結果を新しいメッセージの配列として新しいメッセージを取得します。datastructure 配列を JSON 結果配列の数と接合して、必要な項目を削除します。次に、新しい項目をデータ構造配列に追加します。そして、KnockoutJS や AngularJS などのライブラリを使用して、Div をデータ構造にバインドします。そうすれば、データ構造に新しいアイテムを追加および削除すると、それに応じてレンダリング div が表示されます。

于 2013-05-14T14:36:45.660 に答える