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

要素をランダムに表示させたいけど、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>
最後に

今回は短かったですが、活用できそうでしょうか?
右カラムに表示させたブログ記事を「ランダムに表示させたい」など、意外と活用できる場面があるかもしれません。
この記事があなたの参考や助けになっていれば幸いです。
最後までありがとうございました。