電子書籍の厳選無料作品が豊富！

Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え

締切済

  • 質問者：maz1105
  • 質問日時：
  • 回答数：5件

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がランダムにしたいんだとか・・・。

すみません、もし分かるかた、教えていただけたら助かります！！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5

  • 回答者： think49
  • 回答日時：

ちょっと興味深いネタだったけど、既に立派な回答がついている。


でも、質問者さんはどうしたんだろう？
…と思っていたら、余所で解決していました。

後でこの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() するという解ですね。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： steel_gray
  • 回答日時：

実際の構成に応用するにはそれなりに手が掛かるかもしれないけど。



<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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

全体の構成が不明なので、なんともいえませんが…



<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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

前の質問をよく読んでませんでした。

申し訳ない。
極力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 …];
var yuryo=["http://www.dddd/","http://www.eeee/","http://www …];
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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

まず、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

補足日時：2010/04/21 18:04
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報