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

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"]')'];....

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

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






●質問者: goodbabies
●カテゴリ:ウェブ制作
✍キーワード:href HTML jQuery PHP いもの
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Mars
●10ポイント

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

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

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

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


2 ● ku__ra__ge
●30ポイント

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を一緒に使うのは初めてでした。とても勉強になりました!ありがとうございます


3 ● ホーエンハイム
●30ポイント

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

◎質問者からの返答

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

参考にします。


4 ● Cherenkov
●50ポイント ベストアンサー

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>
◎質問者からの返答

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

関連質問


●質問をもっと探す●



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