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>

数据来了，scoolbox 生成了，但没有列表元素。如果我删除 "> 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 列表。

现在我创建只有一个列表值的短字符串，它会尽快弹出。之后，将字符串值设置为零。代码如下所示：

    $(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 回答