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

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

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

HTML

 
 
Item #2
 
Item #2
 
Item #3
 
Item #4
  

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（）方法附加一个兄弟，所以从

项列表中选择一个随机元素并在其上使用.after() 。 或.before() 。

PS关于新增项目将其他项目推向右侧，为什么会出现问题？ 如果您的列表有水平布局，这是不正常的？

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("
new
"); } else{ $lis.eq(0).before("
new first
"); }