javascript - AJAX 将元素置于列表顶部

标签 javascript html jquery

我有一个用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) 不起作用。有什么想法我犯了错误吗?

最佳答案

它不适用于 > li:first-child 的原因是 ul 最初是空的,因此没有元素与 #database 匹配> li:first-child 选择器,因此您试图将元素放在任何元素之前。您可以使用 .prepend()

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

关于javascript - AJAX 将元素置于列表顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13574700/

相关文章:

javascript - 我可以用外部 JavaScript 控制 Unity3D 吗?

javascript - Select 内的 DatePicker - 防止选择在日期更改时关闭

html - 图片不尊重我给它的类(class)

javascript - 如何通过 JS(或 jQuery)将图像设置为 div?

javascript - 使用JavaScript的submit()函数时如何运行HTML5表单验证?

javascript - 发出调用 x 次按钮的函数

jquery - 相同类名但隐藏一个的 jQuery 选择器是什么?

javascript - 如何在jQuery中读取xml文件内容并显示在html元素中?

javascript - 如何删除某些特殊字符后的值

javascript - 如何将文本框文本传递给href