一个小小的jQuery随机排序子元素插件

无须猫 的头像
2条评论发表评论N/AAttribution

正好需要用到这个效果,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)); });
 
    }
  }));
}

使用

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>

js调用

  //使用reorder函数
  $('html').click(function(){
    $('ul#random').reorder();
  });

l华宇物流 的头像

非常的短小精悍的代码的,收藏了学习一下    

非常的短小精悍的代码的,收藏了学习一下

 

 

德邦物流

l华宇物流 的头像

非常的短小精悍的代码的,收藏了学习一下    

非常的短小精悍的代码的,收藏了学习一下

 

 

德邦物流

发表新评论

此内容将保密,不会被其他人看见。
  • 自动将网址与电子邮件地址转变为链接。
  • 允许HTML标签:<a> <p> <span> <div> <h1> <h2> <h3> <h4> <blockcode> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption>
  • 自动断行和分段。
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <as>, <as3>, <asp>, <css>, <drupal5>, <drupal6>, <html>, <js>, <php>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

更多关於格式化选项的信息

CAPTCHA
请输入问题的答案。
Fill in the blank