Jquery 特定のa要素を持つ親を2つに分けてランダムに順番入れ替え
立て続けに何度も質問して申し訳ありません。いろんな方に質問して、答えていただき、
【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を持つ親要素もランダムで順番を切り替えたいのです。
つまり、上と下で2つに分けたランダムが動いているようにしたいのです。
有料と無料で振り分けて、有料を上でランダム、その下で無料の登録URLがランダムにしたいんだとか・・・。
すみません、もし分かるかた、教えていただけたら助かります!!
A 回答 (5件)
- 最新から表示
- 回答順に表示
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() するという解ですね。
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>
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>
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 …];
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>
No.1
- 回答日時:
まず、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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
jQueryで特定id以外の下にある...
-
表示・非表示のスクリプトで、...
-
iframe内のリンクが飛ばないの...
-
classの中の<a>タグにidを追加
-
removeEventListenerについて
-
getElementByIdの戻り値がnull...
-
クリックするとテーブルの列の...
-
複数のリンク画像を一定時間で...
-
console.log結果をhtmlで表示し...
-
クリックする度に表示/非表示が...
-
javascriptにフェードインを追...
-
[JavaScript]IE11にてフリック...
-
jQueryで同じid属性が複数あっ...
-
javascriptでオブジェクトの重...
-
onclickを使わずにクリック元を...
-
JSで動的にリンクを作成
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報