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

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 */ );

的.经过()方法附加同级,所以选择从列表中选择一个随机元素<li>项,并使用.after()它.或者.before().

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