要素をランダムに並び替えるjQueryとJavaScript【Math.random】

要素をランダムに配置したい人

完成形のイメージ

liを20個並べて、4個だけ表示しています。
並びはランダムで、リロードしたりアクセスする度に入れ替わります。

右下の「Rerun」をクリックすると並び順が変わります。

See the Pen (ul li)をランダム表示 by shimpei (@shimpei) on CodePen.

jQuery

ul>liをランダム表示させるjQuery

<script>
  $(document).ready(function () {
    var bool = [1, -1];
    $('ul').html(
      $('ul>li').sort(function (a, b) {
        return bool[Math.floor(Math.random() * bool.length)];
      })
    );
  });
</script>

JavaScriptだとこんな感じでしょうか？

const ul = document.querySelector('ul');
const liList = Array.from(ul.getElementsByTagName('li'));

liList.sort(() => Math.random() - 0.5);
ul.append(...liList);

4件だけ表示させているCSSはこれです

<style>
  ul>li:nth-child(n+5) {
    display: none;
  }
</style>

最後に

今回は短かったですが、活用できそうでしょうか？
右カラムに表示させたブログ記事を「ランダムに表示させたい」など、意外と活用できる場面があるかもしれません。

この記事があなたの参考や助けになっていれば幸いです。

最後までありがとうございました。