「ページを読み込む度に要素をランダムに並び替える」方法を紹介します。
jQueryで実装する方法です。
順不同の要素をランダムに見てもらいたいときに有効です。
実装する
前提条件としてjQueryをあらかじめ読み込ませる必要があります。
JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function shuffleContent(container) { | |
| var content = container.find("> *"); | |
| var total = content.length; | |
| content.each(function() { | |
| content.eq(Math.floor(Math.random() * total)).prependTo(container); | |
| }); | |
| } | |
| $(function() { | |
| shuffleContent($(".item_wrapper")); | |
| }); |
「.item_wrapper」は並び替える要素を内包する親要素のクラス名です。
お好きなクラス名にして使うことができます。
HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="item_wrapper"> | |
| <div class="item"> | |
| <img src="https://placehold.jp/330/e3e3e3/ffffff/400x400.png?text=1" width="100%"> | |
| </div> | |
| <div class="item"> | |
| <img src="https://placehold.jp/330/e3e3e3/ffffff/400x400.png?text=2" width="100%"> | |
| </div> | |
| <div class="item"> | |
| <img src="https://placehold.jp/330/e3e3e3/ffffff/400x400.png?text=3" width="100%"> | |
| </div> | |
| <!-- 以降繰り返し --> | |
| </div> |
シャッフルしたい要素を並べるだけです。
デモ
実際の動作を確認できるデモです。
Rerunボタンを押すごとに数字のついた画像がシャッフルされます。
See the Pen 【jQuery】ページを読み込む度に要素を並び替えるスクリプト by ざきひー (@zakihiii) on CodePen.0
まとめ
要素をシャッフルする方法は他にもありますが、jQueryを使うと手軽に実装できます。
ランダムに複数の要素を表示できるため、偏りなく要素を表示したい場合にオススメです。
コメント
[…] 【jQuery】ページを読み込む度に要素を並び替える(ネットショップ語り)を参考にさせていただきました。.MVの子要素の順番をランダムにしています。そうすると非表示対象が変わり、結果的にランダムに動画を表示することができました。 […]
動画をランダム表示させる方法の参考記事として紹介いただきました。