Question

我从服务器获得了一个数组，我需要将它们添加到ul中并使ul向上移动。

就像您的消息即将发送或发送一样。但是，如果有一两个li，它们将位于ul的底部而不是顶部。

ul中没有任何内容。追加一个李，并提升这个新李的高度。然后追加下一个生命并继续那样

我将如何使用css和jQuery执行此操作？

在我的脑海里。 html的

<div>
  <ul class="container">
  </ul>
</div>

我不知道如何组装这些css和jQuery以使其向上移动。

感谢您的回答或评论。

Answer 1

您可以从数据数组中添加一系列<li>标记，如下所示：

var data = [
    "One",
    "Two",
    "Three",
    "Four",
    "Five",
    "Six",
    "Seven",
    "Eight",
    "Nine",
    "Ten"
];

var container = $(".container");
$.each(data, function(index, value) {
    container.append("<li>" + value + "</li>");
});

// calculate new scroll position and then animate to it
var pos = container.height() - $(".scrollContainer").height();
pos = Math.max(pos, 0);
$(".scrollContainer").animate({scrollTop: pos}, 500);

工作示例：http://jsfiddle.net/jfriend00/xo03pu79/

或者是一个不同的版本，一次添加一个并保持第一个项目滚动到底部：http://jsfiddle.net/jfriend00/h90x13L2/

并且，一个运行计时器的版本：http://jsfiddle.net/jfriend00/bonw1mft/

向上滚动需要将其放入设置为滚动的包含div中，在添加内容并设置容器的滚动位置以便内容的底部与之对齐后计算新的高度包含div的底部。

Answer 2

听起来很容易。你只需要使用jquery选择器进行切片和切块以使li进入正确的位置。

看看nth-child() selector。

添加每个li时，向上移动ul

2 个答案: