Question

我有一个用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>

数据来了，生成了scroolbox，但没有列表元素。如果我删除“＆gt; li：first-child”列表有效，但最新的元素会像简单的html（'out'）一样进入底部，之前（out）不起作用。我犯了什么错误的想法？

Answer 1

它不能与> li:first-child一起使用的原因，因为ul最初为空，因此没有与#database > li:first-child选择器匹配的元素，因此您尝试将元素放在之前没有。您可以使用.prepend()

$("#database").prepend(out);

Answer 2

$('#database').prepend(out);  // Prepend to <ul id="database">

Here's a simple example

Answer 3

我确实找到了答案。问题是我正在修改一个字符串，所以每次数据到达时它都会被添加到现有字符串并推送到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>

AJAX将元素放在列表的顶部

3 个答案: