• 締切済み

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がランダムにしたいんだとか・・・。 すみません、もし分かるかた、教えていただけたら助かります！！

みんなの回答

  • think49
  • ベストアンサー率59% (285/482)
回答No.5

ちょっと興味深いネタだったけど、既に立派な回答がついている。 でも、質問者さんはどうしたんだろう？ …と思っていたら、余所で解決していました。 後でこの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)
回答No.4

実際の構成に応用するにはそれなりに手が掛かるかもしれないけど。 <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)
回答No.3

全体の構成が不明なので、なんともいえませんが… <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)
回答No.2

前の質問をよく読んでませんでした。申し訳ない。 極力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)
回答No.1

まず、id="shop"は止められないですか？ idは本来ユニークなはずです。 親DIVをclass="yuryou"とclass="muryou"に分けて処理しちゃだめっすか？

maz1105
質問者

補足

ご指摘ありがとうございます。 このid="shop"は仮で、実際にはありません。 >親DIVをclass="yuryou"とclass="muryou"に分けて処理しちゃだめっすか？ こちらについては、htmlを直接いじるということでしょうか？ それとも、Jqueryで、divの名前を変更するということでしょうか？ 誰が作ったかもわからないぐちゃぐちゃなPHPで自動で吐き出されたものなので、HTMLを直接いじることができないのです(涙) すみませんでした、前の質問のURLを書けばよかったですね。申し訳ありません http://oshiete.goo.ne.jp/qa/5841462.html

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Jquery 親要素で順番入れ替え

    Jquery 親要素で順番入れ替え a要素を取得して、その親の親(<div id="shop">)の順番を入れ替えしたいのです。 【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> 【Jquery】 $(function(){ $('a[href*="http://www.aaaa.jp"]').parent().parent(); $('a[href*="http://www.bbbb.jp"]').parent().parent(); .... }); これで『http://www.aaaa.jp』のリンクを持つdivと『http://www.bbbb.jp』のリンクを持つdivとを指定できるわけですが、 ページを表示した時に順番を入れ替えするにはどうしたらよいのでしょうか？例えば、 【実行結果HTML】 <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <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> HTMLを直接触って変更できたら楽なんですけどね～。PHPで吐き出されているのでムリなんです。ソースぐちゃぐちゃで仕様書もない始末なので、Jqueryで入れ替えできないものかと・・・

  • Jqueryで特定のa要素を持つ親要素の取得について

    Jqueryで特定のa要素を持つ親要素の取得について <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> ここから、『http://www.bbbb.jp』のリンクを持つdivを指定するとして・・・ $('a[href*="http://www.bbbb.jp"]').parent().parent().css("background-color","#ccc"); こんな風に書きました。 これでもOKなんですけど、『.parent().parent()』親の親って・・・(汗) もう少しよい親子関係の指定があれば、ぜひ教えていただきたいです！

  • ランダムで表示させたブロック要素内のボタンクリックで、要素の変更

    いつもお世話になってます。 今日はJavaScriptについて質問させてください。 2つのブロック要素（div）を、ランダムに表示させています。 function main() { boxID = new Array(); jmp = new Array(); img = new Array(); alt = new Array(); btn = new Array(); boxID[0] = 'view1'; boxID[1] = 'view2'; jmp[0] = 'url01.html'; jmp[1] = 'url02.html'; img[0] = 'img01.jpg'; img[1] = 'img02.jpg'; alt[0] = '画像１'; alt[1] = '画像２'; btn[0] = 'img/ch01.gif'; btn[1] = 'img/ch02.gif'; n = Math.floor(Math.random()*jmp.length); document.write("<div id='"+boxID[n]+"' class='box'>"); document.write("<h2><a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' alt='"+alt[n]+"' />"); document.write("</a></h2>"); document.write("<p><a href='#'><img ='"+btn[n]+"' alt='要素を切り替え' /></p>"); document.write("</div>"); } 更新するたびに、要素１と、要素２がランダムで出るとこまでは出来ました。 その中の【要素を切り替え】部分のボタンをクリックすることで、１と２を切り替えて表示させたいのです。 ランダムで【要素１】が出た場合、【要素を切り替え】ボタンをクリックすると【要素２】が表示されると言った具合です。 ↓↓↓切り替え用（ネット上からの拾い物） ■JavaScript function fh_change(view, menu, no, roopCount) { var element; for (var i = 1; i <= roopCount; i++) { element = document.getElementById (view + i); element.style.display='none'; } element = document.getElementById(view + no); element.style.display = 'block'; } ■HTML <div id="view1" class="box"> <h2><a href="url01.html"><img src="img01.jpg" alt="画像１" /></a></h2> <p class="btn" id="btn1"><a href="#" id="menu1" onclick="fh_change('view', 'menu', '2', 2);return false;"><img src="img/ch01.gif" alt="要素を切り替え" /></a></p> </div> <div id="view2" class="box" style="display:none;"> <h2><a href="url02.html"><img src="img02.jpg" alt="画像２" /></a></h2> <p class="btn" id="btn2"><a href="#" id="menu2" onclick="fh_change('view', 'menu', '1', 2);return false;"><img src="img/ch02.gif" alt="要素を切り替え" /></a></p> </div> 上手く合体させてあげることが出来ず、困ってます。 お詳しい方いらっしゃいましたら、どうかご助力お願いします！！

  • jQueryで同じ要素の先頭へ親要素を移動したい

    下記のとき、<span>□</span>をクリックしたら、pタグの一番上へ要素を移動するにはどうすればよいでしょうか？ 変更前 <section> 　<div>★</div> 　<p><span>☆</span></p> 　<p><span>■</span></p> 　<p><span>□</span></p> 変更後 <section> 　<div>★</div> 　<p><span>□</span></p> 　<p><span>☆</span></p> 　<p><span>■</span></p> ■やりたいこと ・<section>はそれぞれ複数あるので、クリックした地点からの相対パスで、一番上要素を指定したいです ・「$(this).parent()」を、「$(this).parent()」のpタグ先頭の先頭へ追加すればよい？　どうやって？

  • jqueryで要素の中身を要素の外に出す方法

    教えを貸してください。 jQueryを使って、要素を追加したり、削除したりしています。 このようなHTMLがあります。 <div class="fast"> 　<div class="second"> 　　<p><a href="goo.ne.jp">goo</a></p> 　</div> 　<div class="second"> 　　<p><a href="yahoo.co.jp">yahoo</a></p> 　</div> 　<div class="second"> 　　<p><a href="google.co.jp">google</a></p> 　</div> </div> このとき、yahooへのリンクを含む<div>から外したいのです。 <div class="fast"> 　<div class="second"> 　　<p><a href="goo.ne.jp">goo</a></p> 　</div> 　<p><a href="yahoo.co.jp">yahoo</a></p> 　<div class="second"> 　　<p><a href="google.co.jp">google</a></p> 　</div> </div> 対象となるdivとその中身を取得することはできています。 そのdivを消して、divのあった場所に挿入する。 という方法に悩んでいます。 良い方法がありましたら、教えてください。 よろしくお願いします。

  • jQueryを使ってランダムに表示

    jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか？ できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>

  • jQuery Ajax通信をランダムで表示

    Ajax通信で別htmlファイルを読み込みたいと考えています。 それぞれ読み込むファイルは、a.html、b.html、c.html、d.htmlとあります。 読み込む先(index.html)の以下div要素内に、 上記htmlを読み込みたいと考えています。 <div id="01"></div> <div id="02"></div> <div id="03"></div> <div id="04"></div> 本来ならAjax通信で以下のように出来るかと思います。 $(function(){ 　$('#01').load('a.html'); 　$('#02').load('b.html'); 　$('#03').load('c.html'); 　$('#04').load('d.html'); }); しかし、div要素内の表示をランダムにしたいのです。 例）id="01"のところに、b.htmlだったり、d.htmlだったりという感じです。 　ロードする度にコンテンツの表示場所が変化するイメージです。 ランダムというところが、どのように対処したらよいのか、手も足も出ません。 どなたか詳しい方、ご教授いただけたら助かります。 何卒、何卒、宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • div要素をランダムに表示させたい

    お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }

  • jQueryで特定の要素の表示を知りたい

    iQuery 1.11.1で特定の要素が表示されたかどうかを検出したいと思います。 正確には、最初画面外にある要素が画面に入った時に処理をしたいです。 <div class="a"> 注意 </div> ブラウザをスクロールさせ、上のdivが画面内に入った時、数回点滅させすぐ止めるという処理を考えています。 画面に表示されたかどうかを知る方法を教えてください。

  • jQueryでloadした要素の操作ができない

    loadにて特定のIDを読み込みした後、そのID内の要素にクラスを追加したりdiv要素を追加したりしようとしていますが、読み込んだり読み込まなかったりで困っています。 firebug、chromeは問題なし、iPhone、xperiaで読み込んだIDにaddClass, wrapが適用できません。 ページをリロードすると適用されるので、読み込みの順番かと思いますが、、、 $(window).loadもダメでした。 <div id="loading01"></div> <script type="text/javascript"> $("#loading01").load("../index.html #hogehoge"); </script> <script type="text/javascript"> $("#hogehoge").ready(function() { $('#loading01 li')addClass('css01'); $('#loading01 a').wrap('<div class="css02"><div class="css03">') }); </script> 数時間困り果てています。。。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する