将无序列表随机化
Randomize a unordered list
可能重复:
javascript-打乱HTML列表元素顺序
经过一点帮助。在做了一些很简单的事情之后,但似乎找不到自己做的方法。
我有一个动态无序列表是由一些后端代码生成的(不在我的控制之下(。该列表可以是从9个标签到100+的任何内容。它们按照后端代码定义的顺序返回。使用jQuery/javascript,我希望能够随机化li标记的顺序,而不会让它们重复。
我的列表目前看起来是这样的:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
jQuery论坛上描述了您想要做的事情。
$(document).ready(function(){
$('ul').each(function(){
// get current ul
var $ul = $(this);
// get array of list items in current ul
var $liArr = $ul.children('li');
// sort array of list items in current ul randomly
$liArr.sort(function(a,b){
// Get a random number between 0 and 10
var temp = parseInt( Math.random()*10 );
// Get 1 or 0, whether temp is odd or even
var isOddOrEven = temp%2;
// Get +1 or -1, whether temp greater or smaller than 5
var isPosOrNeg = temp>5 ? 1 : -1;
// Return -1, 0, or +1
return( isOddOrEven*isPosOrNeg );
})
// append list items to ul
.appendTo($ul);
});
});
示例:http://jsbin.com/upuju3/2
相关文章:
- $(document).height()在刷新时随机化值(Safari 5.1.10)
- 如何随机显示列表项的顺序
- 将键盘使用与 Qualtrics 中的答案随机化相结合
- 我怎样才能随机化 HTML 元素的颜色属性
- 通过AJAX调用PHP随机化器的输出
- 如何在JS中随机化backgroundPosition而不使用鼠标移动来制作万花筒的动画
- 如何避免/最小化列表中列表的缩进
- 从字符串行创建结构化列表
- 如何使用搜索筛选器初始化列表视图
- 使用Javascript对RGBA颜色进行光标控制的形状随机化
- 如何在一个随机化的有序列表中随机化多个无序列表
- 如何使用JavaScript随机化有序列表
- 使用JavaScript随机化html标记
- 可以'我的单词随机化器脚本不能正常循环
- 从1-9之间的随机数字列表中选出3个相同的数字
- 如果语句是假的 JavaScript,则再次随机化数字
- 函数随机化 - 我可以让它错过一个页面并且该页面上只有一个图像吗?可湿性粉剂
- 随机化网页上的图像和颜色对
- PHP 从现有代码中随机化文件列表数组
- 将无序列表随机化