【jQuery】ページを読み込む度に要素を並び替える

「ページを読み込む度に要素をランダムに並び替える」方法を紹介します。

jQueryで実装する方法です。

順不同の要素をランダムに見てもらいたいときに有効です。

実装する

JavaScript

「.item_wrapper」は並び替える要素を内包する親要素のクラス名です。

お好きなクラス名にして使うことができます。

HTML

シャッフルしたい要素を並べるだけです。

デモ

実際の動作を確認できるデモです。

See the Pen 【jQuery】ページを読み込む度に要素を並び替えるスクリプト by ざきひー (@zakihiii) on CodePen.0

まとめ

要素をシャッフルする方法は他にもありますが、jQueryを使うと手軽に実装できます。

ランダムに複数の要素を表示できるため、偏りなく要素を表示したい場合にオススメです。