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

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

这是我正在谈论的那种列表的一个例子：
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元素都浮动到左侧.因此,当在中间添加一个新元素时,该元素之后的所有内容都将向右推一个点.

我可以使用左边浮动的几个ul列表,并且li堆叠在彼此之下,所以当渲染新项目时,列表只是被推下来,但是如果我随机执行此操作,一些ul列表可能会比其他列表更长也看起来很奇怪.

解决方法:

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

.after()方法附加一个兄弟,因此从< li>列表中选择一个随机元素.项目和使用.after()就可以了.或.before().

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

标签：jquery,javascript,random,appendto
来源： https://codeday.me/bug/20190610/1209303.html