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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2010/04/21 20:55:53
  • 終了:2010/04/22 09:43:36

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922010/04/22 06:01:44

ポイント100pt

「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>

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922010/04/22 02:32:57

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

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

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

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

「特定の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>
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922010/04/22 06:01:44ここでベストアンサー

ポイント100pt

「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>
  • id:goodbabies
    ありがとうございます。特に正規表現でチェックするなど、自分ひとりで作ったのでは到底思いもしませんでした。
    何がやりたいかは整理できていたとは思うのですが、
    限られた文字数で分かりやすく説明するには画像など添付すればよかったのですね。
    今後はそうしたいと思います。

    とても勉強になりました。本当にありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません