Sort Random

要素をランダムに並び替える機能

CSSに関しては一部CSSライブラリを採用しているので併用してください。

  • DEMO
  • 1
  • 2
  • 3
  • 4

使い方

rdm(target,elements);

例)rdm('#hoge','li.hoge');

  • 第一引数に親要素の[id]を指定。
  • 第二引数に子要素(並び替える対象)の要素名とクラスを指定。
第二引数には[li.hoge]のようにhtml要素を含めて指定してください。
並べかえではなくHTMLを新しく生成するので子要素の属性はクラス1つまでになります。その他の属性は削除されます。
  • HTML
  • Script
function rdm(tars,ele){
    let Arr = [];
    let set1 = '';
    let set2 = '';
    let tar = $(tars);
    let Num = tar.find(ele).length;
    tar.find(ele).each(function(){
      Arr.push($(this).html());
    });
    Arr.sort(function(){
      return Math.random() - Math.random();
    });
    tar.empty();
    if(ele.match(/\./)){
      let cn = ele.split('.');
      set1 = cn[0] + ' class="' + cn[1] + '"';
      set2 = cn[0];
    } else {
      set1 = ele;
      set2 = ele;
    }
    for(var i = 0; i < Num; i++){
      tar.append('<'+set1+'>' + Arr[i] + '');
    }
  }