人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

特定のa要素を持つdivをリロードごとにランダムで順番を切り替える

http://q.hatena.ne.jp/1271232522
一度質問したのですが内容が変更に・・・
【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>

【Jquery】
$(function(){
var shopA = $('a[href*="http://www.aaaa.jp&quot;]').parent().parent().css("background-color","#CCC");
var shopC = $('a[href*="http://www.cccc.jp&quot;]').parent().parent().css("background-color","#666");
shopA.after(shopC);
});

特定のURLを持つ親のdivの順番を入れ替えることに成功しました
さらにこの特定のa要素を持つdivをリロードごとにランダムで順番を切り替えるにはどうすればいいのでしょうか?
さらに、特定のURLを持たない、つまりそれ以外のURLを持つ親要素もランダムで順番を切り替えたいのです。
つまり、上と下で2つに分けたランダムが動いているようにしたいのです。
有料と無料で振り分けて、有料を上でランダム、その下で無料の登録URLがランダムにしたいんだとか。

●質問者: goodbabies
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:666 background-color CCC CSS href
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●0ポイント

下のコメント欄を有効にしたほうが有益です。

何をしたいのか整理できていない印象です。落ち着いて誰が読んでも分かるような質問文をお願いします。簡単な図でもいいです。

(「上と下」「有料と無料」が分からない)

サンプルを載せるならもうちょっと丁寧にお願いします。

「特定のURL」にこだわっていますが、セレクタを適当なものに変えればいいだけです。


このような感じでしょうか? http://jsfiddle.net/UW7aR/ (右下が結果で、上のRunを押す度にリロードされます)

これだと開く度に並び替えをしているのでその処理を見せない工夫が必要だと思います。(処理が終わってから表示したり、htmlに何も入れておかないでjsで挿入するなど。)

<html>
<head>
<style>
#pay_shop_list, #free_shop_list {
 border: 1px solid black;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function shuffle(list) {
 var i = list.length;
 while (i) {
 var j = Math.floor(Math.random()*i);
 var t = list[--i];
 list[i] = list[j];
 list[j] = t;
 }
 return list;
}

$(function(){
 // 有料シャッフル
 $('#pay_shop_list').append(shuffle($('.shop', '#pay_shop_list')));

 // 無料シャッフル
 $('#free_shop_list').append(shuffle($('.shop', '#free_shop_list')));
});
</script>
</head>
<body>
<p>有料</p>
<div id="pay_shop_list">
 <div class="shop">
 <p><a href="http://www.aaaa.jp/">Aお店の名前</a></p>
 <p>Aはラーメン</p>
 </div>
 <div class="shop">
 <p><a href="http://www.bbbb.jp/">Bお店の名前</a></p>
 <p>Bはカレー</p>
 </div>
 <div class="shop">
 <p><a href="http://www.cccc.jp/">Cお店の名前</a></p>
 <p>Cはそば</p>
 </div>
 <div class="shop">
 <p><a href="http://www.dddd.jp/">Dお店の名前</a></p>
 <p>Dは牧場</p>
 </div>
</div>
<br>
<p>無料</p>
<div id="free_shop_list">
 <div class="shop">
 <p><a href="http://www.aaaa.jp/">Eお店の名前</a></p>
 <p>Eは映画館</p>
 </div>
 <div class="shop">
 <p><a href="http://www.bbbb.jp/">Fお店の名前</a></p>
 <p>Fはフランス料理</p>
 </div>
 <div class="shop">
 <p><a href="http://www.cccc.jp/">Gお店の名前</a></p>
 <p>Gは事務所</p>
 </div>
 <div class="shop">
 <p><a href="http://www.dddd.jp/">Hお店の名前</a></p>
 <p>Hはホテル</p>
 </div>
</div>
</body>
</html>

2 ● Cherenkov
●100ポイント ベストアンサー

「HTMLを直接書き換えられればいいのですが、PHPで吐き出されています」という裏設定がありそうなので再び回答。

サンプル http://jsfiddle.net/HU5Gn/

<html>
<head>
<style>
#shop {
 border: 1px solid black;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function shuffle(list) {
 var i = list.length;
 while (i) {
 var j = Math.floor(Math.random()*i);
 var t = list[--i];
 list[i] = list[j];
 list[j] = t;
 }
 return list;
}

$(function(){
 var pay = [], free = [];

 // id="shop"を拾う。
 $('body>#shop').each(function(){
  // 特定のURLを持っているか正規表現でチェック。
 if(/^http:\/\/www\.aaaa\.jp\/|^http:\/\/www\.cccc\.jp\//.test($(this).find('a').attr('href'))) {
 pay.push(this)
 }
 else {
 free.push(this)
 }
 });

 // 追加したい場所に、シャッフルした配列をそのまま入れる。
 $('body').prepend(shuffle(pay), shuffle(free));
});
</script>
</head>
<body>
<div id="shop">
 <p><a href="http://www.aaaa.jp/">Aお店の名前</a></p>
 <p>Aは有料</p>
</div>
<div id="shop">
 <p><a href="http://www.bbbb.jp/">Bお店の名前</a></p>
 <p>Bは無料</p>
</div>
<div id="shop">
 <p><a href="http://www.cccc.jp/">Cお店の名前</a></p>
 <p>Cは有料</p>
</div>
<div id="shop">
 <p><a href="http://www.dddd.jp/">Dお店の名前</a></p>
 <p>Dは無料</p>
</div>

body直下の配置でいいのか。idが重複した状態が疑問だが、セレクタを組み立てる。
</body>
</html>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ