0

ajaxで生成されたリストがあり、要素が来るたびにリストの一番上に来るようにしたい:

私のコードは次のとおりです。

         $(document).ready(function() {
      var socket = io.connect('http://0.0.0.0:3000');
      var out = "";
      socket.on('populate', function(data) {
        $.each(data, function(i, obj) {
    if(obj['Ping'] == "FALSE"){
          out += "<li class='red'><font color='red'>"+obj.Vardas+" is down..."+obj.Data+"</font></li>";
      }
    else{
          out += "<li class='green'><font color='green'>"+obj.Vardas+" is up......."+obj.Data+"</font></li>";   
      }
        });
    $("#database > li:first-child").before(out);//.load(blinkColorRed());
      });
    });
    </script>
  </head>
  <body>
  <div style="float:right; overflow-y:scroll; height: 400px; width: 30%">
    <ul id ='database'></ul>
  </div>
  </body>
</html>

データが来て、スクロールボックスが生成されますが、リスト要素はありません。"> li:first-child" リストを削除すると機能しますが、単純な html('out') before(out) のように最新の要素が一番下に移動します。私が間違えたアイデアはありますか？

4

3 に答える 3

2

が最初は空であるため、セレクターに一致する要素がない> li:first-childため、機能しない理由は、何もない前に要素を配置しようとしているためです。あなたが使用することができますul#database > li:first-child.prepend()

$("#database").prepend(out);
于 2012-11-26T23:15:43.693 に答える
1 
$('#database').prepend(out);  // Prepend to <ul id="database">

簡単な例を次に示します。

于 2012-11-26T23:08:44.543 に答える
0

私は答えを見つけました。問題は、文字列を修正していたため、データが到着するたびに既存の文字列に追加され、HTML リストにプッシュされたことです。

ここで、リスト値が 1 つだけの短い文字列を作成します。これはすぐにポップされます。その後、文字列値をゼロに設定します。コードは次のようになります。

    $(document).ready(function() {
      var socket = io.connect('http://0.0.0.0:3000');
      var out = "";
      socket.on('populate', function(data) {
        $.each(data, function(i, obj) {
    if(obj['Ping'] == "FALSE"){
          out = "<li class='red'><font color='red'>"+obj.Vardas+" is down..."+obj.Data+"</font></li>";
      $(out).prependTo('#database');
      out ="";
      }
    else{
          out = "<li class='green'><font color='green'>"+obj.Vardas+" is up......."+obj.Data+"</font></li>";
      $(out).prependTo('#database');
      out ="";  
      }
        });
    //$(out).prependTo('#database');//.load(blinkColorRed());
      });
    });
    </script>
  </head>
  <body>
  <div style="float:right; overflow-y:scroll; height: 400px; width: 30%">
    <ul id ='database'></ul>
  </div>
  </body>
</html>
于 2012-11-27T01:26:41.240 に答える