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

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

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元素都浮动到左侧.因此,当在中间添加一个新元素时,该元素之后的所有内容都将向右推一个点.

我可以使用左边浮动的几个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