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

Posted 2023-02-25

【中文标题】使用jQuery在随机位置附加内容？

【英文标题】：Append content on random location with jQuery?

【发布时间】：2011-12-21 14:30:06

【问题描述】：

我需要在一个页面中显示一个项目列表，并且这个页面是用 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 列表可能会比其他列表更长，这也会看起来很奇怪。

【参考方案1】：

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

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

附：关于一个新添加的项目将其他项目向右推，为什么会出现问题？如果您的列表有水平布局，那不是很正常吗？

【讨论】：

这很正常，但这就是我不确定是否使用水平布局的原因。虽然这是最简单的方法。谢谢

【参考方案2】：

试试这样的：

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

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

【参考方案3】：

在接受答案的情况下，一个新元素永远不会作为第一个插入。它可以插入的位置是元素数加一。元素之间 + 开头 + 结尾。

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

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>");