Jquery使って、表示されている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.dddd.jp">お店の名前</a></p>
<p>あああああああああ</p>
</div>

<div id="shop">
<p><a href="http://www.cccc.jp">お店の名前</a></p>
<p>あああああああああ</p>
</div>

HTMLを直接書き換えられればいいのですが、PHPで吐き出されています。プログラムもぐっちゃぐちゃで、仕様書も何もない始末なので、
Jqueryつかって、なんとか順番を入れ替えられないものかと。

var array = ['$('div#topshop a[href*="http://www.aaaa.jp"]')', '$('div#topshop a[href*="http://wwwbbbb.jp"]')'];....

こんな感じで配列にするんですかね?
でもその後どうしたらよいのか全く分かりません・・・

分かるかた、ぜひ教えていただきたいです。




回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2010/04/14 17:08:44
  • 終了:2010/04/16 17:12:53

ベストアンサー

id:Cherenkov No.4

Cherenkov回答回数1502ベストアンサー獲得回数4922010/04/15 03:23:13

ポイント50pt

after、beforeとappendを覚えれば簡単に出来ます。

参考:Manipulation - jQuery 日本語リファレンス


サンプル。右下が結果です。

http://jsfiddle.net/dEZTm/

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
  // afterで入れ替え
  function ex1() {
    $('#a').after($('#e'),$('#d'),$('#c'));
  }

  // beforeで入れ替え
  function ex2() {
    $('#c').before($('#d'),$('#a'),$('#e'));
  }

  //idで昇順ソートして置き換える
  function ex3() {
    var newList = $('#shop_list div').sort(function(a, b){
      return a.id > b.id;
    });
    $('#shop_list').append(newList);
  }

  //idで降順ソートして置き換える
  function ex4() {
    var newList = $('#shop_list div').sort(function(a, b){
      return a.id < b.id;
    });
    $('#shop_list').append(newList);
  }

  $('#ex').toggle(ex1, ex2, ex3, ex4);
});
</script>
</head>
<body>
<input id="ex" type="button" value="sample">
<div id="shop_list">
<div id="a"><a href="">shop A</a></div>
<div id="b"><a href="">shop B</a></div>
<div id="c"><a href="">shop C</a></div>
<div id="d"><a href="">shop D</a></div>
<div id="e"><a href="">shop E</a></div>
</div>
</body>
</html>
id:goodbabies

すばらしいです!完璧です。助かりました!ありがとうございます

2010/04/16 17:10:04

その他の回答(3件)

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202010/04/14 19:07:37

ポイント10pt

何と何を入れ替えたいのかわからないです。

どういう条件でどことどこを入れ替えたいのでしょうか?

現状(*)と、結果としてどうなって欲しいかをできる限り具体的に教えてください。

(*)現状は質問に書かれた通り?IDが重複しているようですけどこの通りなんでしょうか?

id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402010/04/14 21:09:47

ポイント30pt

jQuery+prototype.js要素ごとに並べ替え

sortにprototype.jsを利用して、こんな感じでどうでしょうか?

何で並び替えるのかよくわからなかったのでとりあえずhref要素で並び替えてみましたが、※1の部分を変更することで好きな要素を基準に並べ替えられると思います。

<html>
<head>
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
function StrCmp(str1, str2) {
    var ct;
    var cmp;
    if((cmp = str1.length - str2.length) != 0){
        return cmp;
    }
    for(ct = 0; ct < str1.length; ct++) {
        var c1 = str1.charCodeAt(ct);
        var c2 = str2.charCodeAt(ct);
        if((cmp = (c1 - c2)) != 0){
            break;
        }
    }
    return cmp;
}
jQuery.fn.shopSort = function(){
    var sortedArray = $A(this.get()).sort(function(a,b){
        //※1
        var aHref = a.getElementsByTagName('a')[0].href;
        var bHref = b.getElementsByTagName('a')[0].href;
        return StrCmp(aHref, bHref);
    });
    return jQuery(sortedArray);
}
jQuery(function($){
    $("#topshop").html($("#topshop>div").shopSort());
});
</script>
</head>
<body>
<div id=topshop>
<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.dddd.jp">お店の名前d</a></p>
<p>あああああああああ</p>
</div>

<div id="shop">
<p><a href="http://www.cccc.jp">お店の名前c</a></p>
<p>あああああああああ</p>
</div>
</div>
</body>
</html>
id:goodbabies

ありがとうございます。Jqueryとprototypeを一緒に使うのは初めてでした。とても勉強になりました!ありがとうございます

2010/04/16 17:11:17
id:Bombastus No.3

ホーエンハイム回答回数409ベストアンサー獲得回数522010/04/14 23:27:43

ポイント30pt

jQueryプラグインのjQuery UI Sortablesを使って入れ替えをすることができます。

id:goodbabies

ありがとうございます。でもソーターとはちょっと違いました。

参考にします。

2010/04/16 17:09:38
id:Cherenkov No.4

Cherenkov回答回数1502ベストアンサー獲得回数4922010/04/15 03:23:13ここでベストアンサー

ポイント50pt

after、beforeとappendを覚えれば簡単に出来ます。

参考:Manipulation - jQuery 日本語リファレンス


サンプル。右下が結果です。

http://jsfiddle.net/dEZTm/

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
  // afterで入れ替え
  function ex1() {
    $('#a').after($('#e'),$('#d'),$('#c'));
  }

  // beforeで入れ替え
  function ex2() {
    $('#c').before($('#d'),$('#a'),$('#e'));
  }

  //idで昇順ソートして置き換える
  function ex3() {
    var newList = $('#shop_list div').sort(function(a, b){
      return a.id > b.id;
    });
    $('#shop_list').append(newList);
  }

  //idで降順ソートして置き換える
  function ex4() {
    var newList = $('#shop_list div').sort(function(a, b){
      return a.id < b.id;
    });
    $('#shop_list').append(newList);
  }

  $('#ex').toggle(ex1, ex2, ex3, ex4);
});
</script>
</head>
<body>
<input id="ex" type="button" value="sample">
<div id="shop_list">
<div id="a"><a href="">shop A</a></div>
<div id="b"><a href="">shop B</a></div>
<div id="c"><a href="">shop C</a></div>
<div id="d"><a href="">shop D</a></div>
<div id="e"><a href="">shop E</a></div>
</div>
</body>
</html>
id:goodbabies

すばらしいです!完璧です。助かりました!ありがとうございます

2010/04/16 17:10:04

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

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

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

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