4

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

4

3 回答 3

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

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

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

于 2011-11-03T22:30:38.027 回答
1

尝试这样的事情：

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

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

于 2011-11-03T22:27:39.190 回答
1

with accepted answer a new element never gets inserted as first. the position where it can be inserted is number of elements plus one. between elements + beginning + end.

the code is not really nice but fixes it.

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>");
}
于 2013-09-05T10:26:14.417 回答