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タグと認識されていないため、このような挙動となってしまうと思うのですが解決策はありますでしょうか?ご教示いただけますようお願いします。
お礼
ご回答ありがとうございます。 サンプルを見ながら大体の流れをつかめました。 これから勉強して、使えるようになっていきます。