Jquery使って、表示されているHTMLを入れ替えたいのです。

Question

goodbabies

57

56もっと見る

120pt

ウェブ制作

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回まで

登録：2010/04/14 17:08:44
終了：2010/04/16 17:12:53

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

Mars203202010/04/14 19:07:37

10pt

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

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

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

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

No.2

kurage118402010/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>

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

2010/04/16 17:11:17

No.3

ホーエンハイム409522010/04/14 23:27:43

30pt

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

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

参考にします。

2010/04/16 17:09:38

Cherenkov 2010/04/16 17:39:26

サンプルのex3,ex4はFirefoxでしか正しく動作しませんでした。

人力検索はてな特定のa要素を持つdivをリロードごとにラン.. 2010-04-21 20:56:03

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Cherenkov · Accepted Answer · 2010-04-15T03:23:13+09:00

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>

Cherenkov · Accepted Answer · 2010-04-15T03:23:13+09:00

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>

Jquery使って、表示されているHTMLを入れ替えたいのです。

ベストアンサー

Cherenkov15044932010/04/15 03:23:13

その他の回答（3件）

Mars203202010/04/14 19:07:37

kurage118402010/04/14 21:09:47

ホーエンハイム409522010/04/14 23:27:43

Cherenkov15044932010/04/15 03:23:13ここでベストアンサー

コメント（1件)

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

トラックバック

Jquery使って、表示されているHTMLを入れ替えたいのです。

ベストアンサー

Cherenkov15044932010/04/15 03:23:13

その他の回答（3件）

Mars203202010/04/14 19:07:37

ku__ra__ge118402010/04/14 21:09:47

ホーエンハイム409522010/04/14 23:27:43

Cherenkov15044932010/04/15 03:23:13ここでベストアンサー

コメント（1件)

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

トラックバック

kurage118402010/04/14 21:09:47