質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

530閲覧

ワードプレスでdiv要素をランダムで並び替える方法

dreamfactory

総合スコア20

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2018/10/05 09:39

div要素の中の画像をページを読み込む時度に、ランダムで並び替えるようにしたいです。

http://www.finefinefine.jp/jquery/kiji2068/【参考ページ】

html

<div id="random"> <div class="item_box2"> <div class="item_pic2"><a href="画像1" /></a></div> <div class="item_pic2"><a href="" /></a></div> <div class="item_pic2"><a href="" /></a></div> <div class="item_pic2"><a href="" /></a></div> </div> </div>

JavaScript

<script type="text/javascript"> $(function() { var arr = []; $("#random div").each(function() { arr.push($(this).html()); }); arr.sort(function() { return Math.random() - Math.random(); }); $("#random").empty(); for(i=0; i < arr.length; i++) { $("#random").append('<div>' + arr[i] + '</div>'); } }); </script>

上記のように記入したのですが全く動きません。

Javaはheader.phpの中に記入しています。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

提示いただいたコードはそもそも画像が表示されないのではないでしょうか。
多分ソート以前の問題で動作していないので、wordpress のせいにするのはやめてあげてください。

とりあえず、気が付いた誤りを指摘させていただきます。

html部

html

1<div class="item_pic2"><a href="画像1" /></a></div>

この一行の中に突っ込みどころが山積しています。

まず、画像を表示したいなら、 a タグではなく img タグを使ってください。
また、a タグが自己終了 (<a ... /> のように、末尾に**/** が入っている)しているのに閉じタグ(</a>)もあります。

そして、コードで要素を作っているので、せっかく div タグに設定してある class 指定は一回でもコードが動作すると消えてしまいます。

直すとこんな感じになります。

html

1<div><img src="画像1"></img></div>

script 部

まず、初めの$("#random div") の部分ですが、このセレクタでは、
"item_box2" のクラスが付いた div ボックスも対象になってしまっています。
つまり、4つの要素を処理する意図で書かれているっぽいのに、5つの要素を処理しています。

さらに、

javascript

1for(i=0; i < arr.length; i++) { 2 $("#random").append('<div>' + arr[i] + '</div>'); 3}

の部分では、 #random の直下に要素を生成しているので、そもそもはじめと違う構造のhtml を生成しています。

ほとんど元のサイトと同じことをやろうとしていながら、コピペに頼らず自力で書き直そうとした努力には感服いたしますが、もう少しよくコードを見てやってください……。

投稿2018/10/06 08:38

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dreamfactory

2018/10/06 09:59

回答ありがとうございます。 html部分は私の書き間違いでR.mizukami様の記入されたとおりにいれてました。こちらにコピペするときに寝ぼけていたのか。。。ご指摘ありがとうございます。 言われたとおりもうちょっと一から見直してみます
guest

0

とりあえず、ランダムに並べたくてその方法はいかんです
バブルソートで2分の1の確率で入れ替わらないとかいう感じだと
まあ、各要素が元の位置から前後2〜3個程度移動するだけで
ほとんどランダムな順番と言えるもんにはならんですよ

要素がなくなるまでランダムに取り出していく
というような方法の方がシンプルで確実

あるいはunderscoreを使うかですかね、wpの中にはunderscoreがいてるので
wp_enqueue_script('underscore');するだけでunderscore使えますん

またはわざわざ要素のHTMLを取り出して配列作らず
0〜要素の数-1の数列をランダムに並べ替えてから
その順番でjQueryオブジェクトから要素を取り出して入れていくとか
多分これが一番軽いと思います

投稿2018/10/05 10:49

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dreamfactory

2018/10/05 14:51

回答ありがとうございます! もともと参考にしていたサイトのコードは、ワードプレスではなく、静的なサイト?のときはきちんと動いていたのですが、ワードプレス特有の関数が邪魔をするということですかね? すいません、当方ワードプレス初心者なもので。。。 ①② ③④ と並んだ画像を ④① ②③ のようにページをリロードする度に位置が変わるようにしたいんですが 詰んでます・・・。 もう少しだけ詳しく説明頂いてもよろしいでしょうか? 申し訳ないです。
KazuhiroHatano

2018/10/05 15:31

回答はランダムソートの方法があまりよろしくないというだけです バブルソートの処理で比較をランダムにした場合 特に先頭の要素の位置の変化を想像してみたらわかると思うんですが 質問に書かれた方法だと先頭の要素が1番目にとどまる確率50% 2番目25%、3番目12.5%、と言った感じに元の位置から 離れるほど行く確率が低くなり、結果は元の配列の順番にかなり近いものになります これではとてもランダムとは言えないだろうということです
KazuhiroHatano

2018/10/05 15:35

jQueryが動かないのは、とりあえずnoconflictを疑いますかね $(function() { ↓ jQuery(function($){ WPのjqueryはnoconflictしてたかな? いつも備えて書いてるからどっちだったか…
guest

0

投稿2018/10/05 09:46

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dreamfactory

2018/10/05 14:42

回答ありがとうございます。 cssでこんな動きもできるのですね! まずJavaでやってみてむりなら試してみます! ありがとうございます!!
guest

0

ベストアンサー

http://www.finefinefine.jp/jquery/kiji2068/【参考ページ】のソースをorderで並べ替えるサンブルです。

html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>要素をランダムに並び替える</title> 7 <style type="text/css"> 8 @import "http://www.finefinefine.jp/wp/wp-content/themes/mystique/style.css"; 9 @import "http://www.finefinefine.jp/date/2010/10/?mystique=css"; 10 11 #header-wrapper { 12 height: 60px; 13 } 14 15 #header { 16 height: 60px; 17 } 18 19 #site-title { 20 padding: 10px 0 0 0; 21 } 22 23 h5 { 24 margin-top: 20px; 25 } 26 27 #main { 28 clear: left; 29 margin: 20px auto; 30 padding: 5px 20px; 31 width: 800px; 32 } 33 34 h3 { 35 font-size: 20px; 36 } 37 38 #button { 39 margin: 50px auto 20px auto; 40 width: 200px; 41 padding: 10px; 42 border: solid 2px #ccc; 43 background: #eee; 44 text-align: center; 45 font-weight: bold; 46 cursor: pointer; 47 } 48 49 #sample { 50 margin: 10px auto 400px auto; 51 width: 800px; 52 padding: 20px; 53 display: grid; 54 } 55 56 #sample div { 57 float: left; 58 margin: 0 20px 20px 0; 59 width: 160px; 60 height: 120px; 61 border: solid 3px #ccc; 62 } 63 64 65 #sample img { 66 width: 160px; 67 </style> 68 <script type="text/javascript" src="http://www.google.com/jsapi"></script> 69 <script type="text/javascript"> 70 google.load("jquery", "1.7"); 71 </script> 72 <script type="text/javascript"> 73 $(function () { 74 const shuffleByES6 = array => { 75 // deep copy 76 const ary = array.slice(); 77 for (let i = ary.length - 1; 0 < i; i--) { 78 let r = Math.floor(Math.random() * (i + 1)); 79 // ary[i] <-> ary[r] 80 [ary[i], ary[r]] = [ary[r], ary[i]]; 81 } 82 return ary; 83 } 84 85 const samples = document.getElementById("sample"); 86 const divs = samples.getElementsByTagName("div"); 87 const orders = new Array(divs.length).fill(null).map((_, i) => i); 88 89 const ordersShuffledByES6 = shuffleByES6(orders); 90 91 //この下だけなにか気に入らない。良き書き方は? 92 let index = 0; 93 for (let div of divs) { 94 div.style.order = ordersShuffledByES6[index++]; 95 } 96 97 }) 98 </script> 99</head> 100 101<body class="archive date col-2-right fixed loggedin browser-chrome"> 102 <div id="page"> 103 104 <div class="page-content header-wrapper"> 105 106 <div id="header"> 107 108 <div id="site-title" class="clear-block"> 109 <div id="logo"><a href="http://www.finefinefine.jp"><img src="http://www.finefinefine.jp/wp/wp-content/uploads/F3.png" 110 title="fine×3 | jQueryのサンプルやtipsの紹介 111" alt="fine×3 | jQueryやらhtml5,cssとか" /></a></div> 112 <p class="headline"> jQueryのサンプルやtipsの紹介 113 </p> 114 </div> 115 <!--site-title--> 116 117 </div> 118 <!--header--> 119 120 </div> 121 <!--page-content--> 122 123 <div id="main"> 124 125 <h5>要素をランダムに並び替える</h5> 126 <div id="sample"> 127 <div>1</div> 128 <div>2</div> 129 <div>3</div> 130 <div>4</div> 131 <div>5</div> 132 <div>6</div> 133 <div>7</div> 134 <div>8</div> 135 <div>9</div> 136 <div>10</div> 137 <div>11</div> 138 <div>12</div> 139 </div> 140 141 </div> 142 <!--main--> 143 144 </div> 145 <!--page--> 146 147</body> 148 149</html>

実証サンプルなのでいい加減かもしれないです。が動きますよ。

コンセプト

gridまたはflexのorderで並び替える

元ソースからの変更点

css

1 #sample { 2 display: grid; /*追加*/ 3 }

js

1<scrip> 2 実現手段が違うから中身全部変更。 3 関数shuffleByES6はlodashやunderscoreの代替 4 jquery好きじゃない 5</scrip>

何をやっているかはコメント見れば解ると思います。
おやすみなさい

投稿2018/10/05 16:20

編集2018/10/06 08:46
oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問