一个小小的jQuery随机排序子元素插件
正好需要用到这个效果，Google一番，找到Rebecca Murphey写的一个jQuery随机排序子元素插件（jQuery: Randomly reorder children elements of selected elements），记录一下。
jquery.reorder.js
$.fn.reorder = function() {
//random array sort from
//http://javascript.about.com/library/blsort2.htm
function randOrd() { return(Math.round(Math.random())-0.5); }
return($(this).each(function() {
var $this = $(this);
var $children = $this.children();
var childCount = $children.length;
if (childCount > 1) {
$children.remove();
var indices = new Array();
for (i=0;i<childCount;i++) { indices[indices.length] = i; }
indices = indices.sort(randOrd);
$.each(indices,function(j,k) { $this.append($children.eq(k)); });
}
}));
}
//random array sort from
//http://javascript.about.com/library/blsort2.htm
function randOrd() { return(Math.round(Math.random())-0.5); }
return($(this).each(function() {
var $this = $(this);
var $children = $this.children();
var childCount = $children.length;
if (childCount > 1) {
$children.remove();
var indices = new Array();
for (i=0;i<childCount;i++) { indices[indices.length] = i; }
indices = indices.sort(randOrd);
$.each(indices,function(j,k) { $this.append($children.eq(k)); });
}
}));
}
使用
xhtml
<ul id="random">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
js调用
//使用reorder函数
$('html').click(function(){
$('ul#random').reorder();
});
$('html').click(function(){
$('ul#random').reorder();
});
- 3954 次点击
非常的短小精悍的代码的，收藏了学习一下
非常的短小精悍的代码的，收藏了学习一下
德邦物流
非常的短小精悍的代码的，收藏了学习一下
非常的短小精悍的代码的，收藏了学习一下
德邦物流
发表新评论