- 締切済み
Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え
Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え 立て続けに何度も質問して申し訳ありません。いろんな方に質問して、答えていただき、 【HTML】 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.dddd.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.eeee.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.ffff.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.gggg.jp">お店の名前</a></p> <p>あああああああああ</p> </div> 【Jquery】 $(function(){ var shopA = $('a[href*="http://www.aaaa.jp"]').parent().parent().css("background-color","#CCC"); var shopC = $('a[href*="http://www.cccc.jp"]').parent().parent().css("background-color","#666"); shopA.after(shopC); }); 特定のURLを持つ親のdivの順番を入れ替えることに成功しました。が、 さらにこの特定のa要素を持つdivをリロードごとにランダムで順番を切り替えるにはどうすればいいのでしょうか？？ さらに、特定のURLを持たない、つまりそれ以外のURLを持つ親要素もランダムで順番を切り替えたいのです。 つまり、上と下で２つに分けたランダムが動いているようにしたいのです。 有料と無料で振り分けて、有料を上でランダム、その下で無料の登録URLがランダムにしたいんだとか・・・。 すみません、もし分かるかた、教えていただけたら助かります！！
- maz1105
- お礼率43% (22/51)
- JavaScript
- 回答数5
- ありがとう数9
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
ちょっと興味深いネタだったけど、既に立派な回答がついている。 でも、質問者さんはどうしたんだろう？ …と思っていたら、余所で解決していました。 後でこのQ&Aを参考にする方のために、参考URLとして書いておきます。 Jquery使って、表示されているHTMLを入れ替えたいのです。 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>ああ</p> </div> <div.. - 人力検索はてな http://q.hatena.ne.jp/1271232522 特定のa要素を持つdivをリロードごとにランダムで順番を切り替える http://q.hatena.ne.jp/1271232522 一度質問したのですが内容が変更に・・・ 【HTML】 <div id="shop"> .. - 人力検索はてな http://q.hatena.ne.jp/1271850951 配列を shuffle() するという解ですね。
- steel_gray
- ベストアンサー率66% (1052/1578)
実際の構成に応用するにはそれなりに手が掛かるかもしれないけど。 <html> <head> <title></title> <style type="text/css"> #yuuryou { background-color:#fcc; } #muryou { background-color:#ccf; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var URLlist = [ //有料URLのリスト 'http://www.bbbb.jp', 'http://www.dddd.jp', 'http://www.ffff.jp', ]; var OYA = $('a[href="'+URLlist[0]+'"]').parent().parent().parent(); $('div:first',OYA).before('<div id="yuuryou"><div class="dummy"></div></div>'); $('div#yuuryou').after('<div id="muryou"><div class="dummy"></div></div>'); $('div[id!="yuuryou"][id!="muryou"][class!="dummy"]',OYA).each(function(){ var P = (jQuery.inArray($('a',$(this)).attr('href'),URLlist)>-1)?$('#yuuryou'):$('#muryou'); var x = Math.floor(Math.random() * $('div',P).length ); $(this).insertBefore( $('div',P).eq( x ) ); }); $('.dummy').remove(); }); </script> </head> <body> <div id="shop"><p><a href="http://www.aaaa.jp">お店A</a></p><p>ああ</p></div> <div id="shop"><p><a href="http://www.bbbb.jp">お店B</a></p><p>いい</p></div> <div id="shop"><p><a href="http://www.cccc.jp">お店C</a></p><p>うう</p></div> <div id="shop"><p><a href="http://www.dddd.jp">お店D</a></p><p>ええ</p></div> <div id="shop"><p><a href="http://www.eeee.jp">お店E</a></p><p>おお</p></div> <div id="shop"><p><a href="http://www.ffff.jp">お店F</a></p><p>かか</p></div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
全体の構成が不明なので、なんともいえませんが… <div><p><a href="○○">AAA</a></p><p>AAAA</p></div> みたいな<div>～</div>を単位として、リンク先で2種類に分け、それぞれのグルーピング内でランダムに並べ替えたいという意味と解釈しました。 <div>群の親要素が特定できるのであれば（ご質問文から察するに、なんとなくbodyなのかと思いますが）、リンクタグからアプローチするのではなく、対象としているdivからアプローチする方法ではいかがでしょうか？ 以下のサンプルでは、包括要素を<div id="wrap">と仮定しています。 その中に該当しない要素（ごく簡単名チェックしかしてませんが）があった場合は、先頭に押しやられます。 （面倒なのでjqueryは使ってません） ボタンを押す度に並べ替えを行ないます。 （取得時に並べ替えを行なっているので、厳密には等確率のシャッフルにはなってないかも） d[]の数を増やすことで、グルーピングが3種類以上であっても同じ考えでいけるはずです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <script type="text/javascript"> <!-- function test() { var wrp = document.getElementById('wrap'); var i, n, a, d = [], e = wrp.firstChild; var hrf = '○○'; d[0] = [], d[1] = []; while (e) { if (e.nodeName == 'DIV') { a = e.getElementsByTagName('A'); if (a[0]) { i = a[0].href==hrf?0:1, d[i].unshift(e); n = Math.floor(Math.random() * d[i].length) d[i][0] = d[i][n], d[i][n] = e; } } e = e.nextSibling; } for (i=0; i<2; i++) { for (n=0; n<d[i].length; n++) wrp.appendChild(d[i][n]); } } //--> </script> </head> <body> <input type="button" value="test" onclick="test()"> <hr> <div id="wrap"> <div><p><a href="○○">A1</a></p><p>A1</p></div> <div><p><a href="××">B1</a></p><p>B1</p></div> <div><p><a href="△△">C1</a></p><p>C1</p></div> <div><p><a href="○○">A2</a></p><p>A2</p></div> <div><p><a href="◇◇">D1</a></p><p>D1</p></div> <div><p><a href="○○">A3</a></p><p>A3</p></div> <div><p><a href="□□">E1</a></p><p>E1</p></div> <div><p><a href="▽▽">F1</a></p><p>F1</p></div> <div><p><a href="○○">A4</a></p><p>A4</p></div> </div> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
前の質問をよく読んでませんでした。申し訳ない。 極力jQueryを使ってサンプル作ってみました。 <script type="text/javascript"> <!-- //配列のシャッフルはFisher-Yatesのアルゴリズムを移植（盗用） Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } $(function(){ var muryo=["http://www.aaaa/","http://www.bbbb/","http://www.cccc/"]; var yuryo=["http://www.dddd/","http://www.eeee/","http://www.ffff/"]; var muryowrk=[]; var yuryowrk=[]; var muryodiv = $("<div></div>"); var yuryodiv = $("<div></div>"); var seq=0; $.each($("a"),function(){ if($.inArray(this.href,muryo)>=0){ muryowrk.push($(this).parents("div:eq(0)")); $(this).parents("div:eq(0)").remove(); } if($.inArray(this.href,yuryo)>=0){ yuryowrk.push($(this).parents("div:eq(0)")); $(this).parents("div:eq(0)").remove(); } }); muryowrk.shuffle(); $.each(muryowrk,function(){muryodiv.append(this);}); $("#random").append(yuryodiv); yuryowrk.shuffle(); $.each(yuryowrk,function(){yuryodiv.append(this);}); $("#random").append(muryodiv); }); // --> </script> <body> <div> <p><a href="http://www.aaaa/">お店の名前あ</a></p> <p>あああああああああ</p> </div> <div> <p><a href="http://www.bbbb/">お店の名前い</a></p> <p>いいいいいいいいい</p> </div> <div> <p><a href="http://www.cccc/">お店の名前う</a></p> <p>ううううううううう</p> </div> <div> <p><a href="http://www.dddd/">お店の名前え</a></p> <p>えええええええええ</p> </div> <div> <p><a href="http://www.eeee/">お店の名前お</a></p> <p>おおおおおおおおお</p> </div> <div> <p><a href="http://www.ffff/">お店の名前か</a></p> <p>かかかかかかかかか</p> </div> <div id="random"></div> </body>
- yyr446
- ベストアンサー率65% (870/1330)
まず、id="shop"は止められないですか？ idは本来ユニークなはずです。 親DIVをclass="yuryou"とclass="muryou"に分けて処理しちゃだめっすか？
補足
ご指摘ありがとうございます。 このid="shop"は仮で、実際にはありません。 >親DIVをclass="yuryou"とclass="muryou"に分けて処理しちゃだめっすか？ こちらについては、htmlを直接いじるということでしょうか？ それとも、Jqueryで、divの名前を変更するということでしょうか？ 誰が作ったかもわからないぐちゃぐちゃなPHPで自動で吐き出されたものなので、HTMLを直接いじることができないのです(涙) すみませんでした、前の質問のURLを書けばよかったですね。申し訳ありません http://oshiete.goo.ne.jp/qa/5841462.html