HTML

Question

我需要在页面中显示项目列表，并使用AJAX更新此页面。每次将新项目推送到客户端时，我希望它显示在ul list内的随机位置。

这是我正在谈论的那种列表的一个例子： http://jsfiddle.net/XEK4x/

HTML

<ul class="itemlist">
    <li>Item #2</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

CSS

.itemlist li{
    width:100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    float: left;
    background: #dddddd;
}

我是如何使用jquery在列表中的随机位置添加新项目的？我知道我可以做$(li_element).appendTo(".itemlist");之类的事情，但这会把它附加到列表的底部。

可能存在问题的另一个问题是每个li element都浮动到左侧。因此，当在中间添加一个新元素时，该元素后面的所有内容都会被推到右边一个位置。

我可以使用several ul lists floated left和li's stacked under each other，所以当呈现新项目时，列表只会被推下来，但如果我随机执行此操作，则某些ul列表可能会比其他人看起来也很奇怪。

Answer 1

var $lis = $(".itemlist li");
$lis.eq(Math.floor(Math.random()*$lis.length)).after(
                                            /* your new content here */ );

.after()方法附加了一个兄弟，因此从<li>项列表中选择一个随机元素并在其上使用.after()。或.before()。

P.S。关于新增项目将其他项目推向右侧，为什么这是一个问题？如果你的列表有水平布局，那不正常吗？

Answer 2

尝试这样的事情：

var randomNum = Math.floor(Math.random()*9);
$(".itemlist li").eq(randomNum).append("HI");

只需在javascript中创建一个随机数。然后在列表中选择该随机元素并附加新内容。除非我不理解这个问题。

Answer 3

接受答案时，新元素永远不会作为第一个插入。可以插入的位置是元素数加1。元素之间+开始+结束。

代码不是很好但是修复它。

http://jsfiddle.net/XEK4x/38/

var $lis = $(".itemlist li");
var pos = Math.floor(Math.random() * ($lis.length + 1)) - 1;
if(pos != -1){
  $lis.eq(pos).after("<li>new</li>");
} else{
  $lis.eq(0).before("<li>new first</li>");
}

使用jQuery在随机位置附加内容？

HTML

CSS

3 个答案: