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