ajaxローディングで取得したデータの並べ替え

質問

お世話になっております。

データベースからデータを取得し表示し、「もっと見る」ボタンを押下されたらajaxローディングで追加分を取得するという処理と行っています。

◆javascript処理
-----------
$(function() {
//More Button
$('.more').live("click",function() {
var ID = $(this).attr("id");
if(ID) {
$.ajax({
type: "POST",
url: "～.php",
data:"id="+ID,
cache: false,
success: function(html){
$("#updates").append(html);
$("#more"+ID).remove();
}
});
}
});
});
--------
上記の方法で追加部分を取得することはできています。

同じページ内にボタンを配置し取得したデータをソートできるようにしているのですが、
上記の「もっと見る」ボタンで取得後にソートを行うと取得した部分が消えてしまいます。

並べ替えの処理は以下の通り
---------------------
jQuery(document).ready(function($) {
$('#btn').click(function() {
//**********************************************
//新着順で並べ替え
//**********************************************
$('#list').html(
$('#list > li').sort(function(a, b) {
return parseInt($(b).attr('id'), 10) - parseInt($(a).attr('id'), 10);
})
);
});
---------------------

またボタンとリスト部分は以下の通りです。
liタグを並べ替えるボタンを配置しています。

------------------
<button id="btn">降順に並べ替え</button>
<ul id="list">
<li id=1>～</li>
<li id=2>～</li>
<li id=3>～</li>
</ul>
------------------

ajaxローディングで追加取得している部分がliタグと認識されていないため、このような挙動となってしまうと思うのですが解決策はありますでしょうか？ご教示いただけますようお願いします。

回答No.2

fujillin

No.1です。

＞<div id="updates"></div>部分に追加取得した<li>～</li>を出力するようにしています。
<div>内に追加した時点で（というかdivがある時点で）文法違反になっていませんか？

＞ブラウザ上で「ソースを表示する」で取得したhtmlソースは(1)初期状態～～
ブラウザの「ソースの表示」は常に「ソース」を表示するようになっています。
変更されたＤＯＭを確認する場合は、スクリプトで表示させるか、あるいは開発用のツールなどで御確認ください。（最近のブラウザには装備されているものもあるかと思います）

さて、元のご質問文にあるソートのスクリプトですが
＞$('#list > li')～～
となっていますので、<div>内の<li>要素は対象にならないので、（元からある）<li>要素だけが対象になります。
さらにその結果を、
＞$('#list').html(～～）
としていますので、結果的に、対象外のものは削除されることになります。
これが直接の原因ではないですか？

この辺りを調整すれば、意図なさったようになるかと…

お礼

アドバイスありがとうございます。

$("#updates").append(html);の部分を$("#list").append(html);に修正して<li>を追加することで実現できました。

回答No.1

fujillin

よくわかってませんが…

追加取得したあとのDOMはどのようになっているのでしょうか？
というか、phpから追加取得するデータは<li>～</li>の要素群になっているのでしょうか？

いろいろ疑問点がありすぎるけれど、

並べ替えの対象は、ul#list内のli要素になっていますが、そこに同列でちゃんと追加されていますか？
追加するスクリプトでは、$("#updates").append(html);となっていますが、#updatesってどこ？
HTMLの文法上はulの子要素はliのみとなっていたかと思いますが、そうなるように追加できていますか？

疑問点の列挙になってしまいましたが、このあたりに原因がありそうに思います。

補足

＞というか、phpから追加取得するデータは<li>～</li>の要素群になって
＞いるのでしょうか？

はい、その通りです。<li>～</li>の要素群だけを取得しています。

＞追加するスクリプトでは、$("#updates").append(html);となっています
＞が、#updatesってどこ？
<ul>
<li>～</li>
<li>～</li>
<div id="updates"></div>
</ul>

となっており、<div id="updates"></div>部分に追加取得した<li>～</li>を出力するようにしています。ただ、ブラウザ上で「ソースを表示する」で取得したhtmlソースは(1)初期状態、(2)もっと見るで追加取得した後、(3)ソートを行い並べ替えをした後、ですべて同じソースになっています。