javascriptでhtml内の<li>タグの順番をアクセス毎に並び替えたい。

Question

最近javascriptをやり始めたばかりですが、行き詰まってしまいました。
やりたい事は、タイトルの通りでhtml内にあるliタグの順番をアクセス毎に並び替えたいと言うものです。
jQueryではなく、ピュア？jsでやりたいですが、ご教授頂けたら嬉しいです。

該当のソースコード

<ul id="worksFigure">
      <li>
        <img src="images/○○.jpg" alt="">
      </li>
      <li>
        <img src="images/○○.jpg" alt="">
      </li>
      <li>
        <img src="images/○○.jpg" alt="">
      </li>
      <li>
        <img src="images/○○.jpg" alt="">
      </li>
      <li>
        <img src="images/○○.jpg" alt="">
      </li>
      <li>
        <img src="images/○○.jpg" alt="">
      </li>
    </ul>

  // 要素の取得
  let worksFigu = document.getElementById("worksFigure");
  let figuLi = worksFigu.childElementCount;
  let figuLiLeng = worksFigu.getElementsByTagName("li");

  // ランダム関数
  function rand() {
    var Mrand = Math.floor(Math.random() * figuLiLeng.length -1 );
    return Mrand;
  }

  figuLiLeng[rand()];//li.lengthのランダム関数ができる

  // 要素の数だけ繰り返す
  for(i = 0; i < figuLiLeng.length; i++ ) {
    let numb = Math.floor(Math.random() * figuLiLeng.length );//0~13をランダムで返す
    console.log(numb);
  }

試したこと

liが14個ほど並びます。js側で画像を配列にして<ul>の中に入れるのはわかるのですが、今後の更新も兼ねてjsを弄るよりはhtml側に<li>を増やすだけで良くしたいです。
私のロジックでは 1,要素（DOM）の取得。2,要素（li）数だけランダムを繰り返す。３,ランダムだと同じ数字を吐き出すので重複させない。4,html側に吐き出す。
３番目の重複させないと言うものが調べても全く理解できません。乱数を重複させないで有名な何とか法てものも見ましたが…。
ちなみに画像名は別々で、決まりもないです。なのでliに対して操作したいです。伝え方が下手ですが、宜しくお願いします。

Answer 1

別のアプローチで作りました。

<ul>のスタイルをflex及び縦方向にして、 <li>のスタイルをdisplay:list-item block;にすることで、[order](https://developer.mozilla.org/ja/docs/Web/CSS/order)による並び替えが出来ます。

DOMをイジらないので、<li>が増えても負荷はほとんどかからないかと思います。

<ul id="worksFigure" style="display: flex;flex-direction: column">
    <li style="display:list-item block; ">
      1
    </li>
    <li style="display:list-item block;">
      2
    </li>
    <li style="display:list-item block;">
      3
    </li>
    <li style="display:list-item block;">
      4
    </li>
    <li style="display:list-item block;">
      5
    </li>
    <li style="display:list-item block;">
      6
    </li>
    <li style="display:list-item block;">
      7
    </li>
    <li style="display:list-item block;">
      8
    </li>
    <li style="display:list-item block;">
      9
    </li>
  </ul>
</ul>

  // 要素の取得
  let li = document.querySelectorAll("#worksFigure li");

  // ランダム関数
  function rand() {
    var Mrand = Math.floor(Math.random() * li.length -1 );
    return Mrand;
  }

  // <li>のorderだけ修正して並び直す
  Array.from(li).forEach( elm =>{ elm.style.order=rand()});

…display:list-item blockは知らんかった。

Comments

[jun68ykt]

こういう手があったんですね。CSSに order というのがあるのを初めて知りました ????

[oikashinoa]

orderで順番指定するだけなので、HTMLElementをshuffleする時と比べて負荷は低いですし、shuffleミスによるElement重複は考えなくていいのばメリットですね。

orderで同じ番号有った時はブラウザ側で良しなにしてくれます(たぶん実体が早いほうが上に来る…ハズ)

[jun68ykt]

なるほど、納得です ????

Answer 2

こんにちは

配列の要素をランダムに並び替える、いわゆるシャッフル(shuffle)するアルゴリズムを書く必要があり、自分で書くのもよいですが、定評あるサンプルを読んで理解するほうがよいかと思います。

30 秒で理解できるコード集という趣旨の 30secondsofcode に載っているshuffle を使うと、一例として以下のように書けます。

const worksFigu = document.getElementById("worksFigure");  
const items = worksFigu.getElementsByTagName("li");
const randomItems = shuffle(items);
  
worksFigu.innerHTML = '';  
randomItems.forEach(item => {
  worksFigu.appendChild(item);
});

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/MWarzpK?editors=1010

または、配列やオブジェクトの操作に便利なライブラリ lodash の _.shuffle を使うならば、上記のコードでrandomItems を作る行を以下に修正します。

const randomItems = _.shuffle([...items]);

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/zYvpMXp?editors=1010

Comments

[LKawauso]

回答ありがとうございます。
コードみたり記載頂いたサイト見ても理解するのが難しいので、
自分で書くとなると程遠い道のりですがjs楽しいので頑張ります。
ありがとうございました。

[jun68ykt]

どういたしまして????
転載したshuffleのコードは、俗に「フィッシャー–イェーツのシャッフル」と呼ばれるアルゴリズムです。検索するといろいろな解説記事が出ていると思います。