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

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

要素をランダムに表示させたいけど、jQueryでできるかな?

 しんぺー

簡単にできますよ。
下にCodePenとコードを貼り付けておきますね。

完成形のイメージ

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>

最後に

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

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

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

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。