お世話になっております。
データベースからデータを取得し表示し、「もっと見る」ボタンを押下されたら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タグと認識されていないため、このような挙動となってしまうと思うのですが解決策はありますでしょうか?ご教示いただけますようお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
No.1です。
><div id="updates"></div>部分に追加取得した<li>~</li>を出力するようにしています。
<div>内に追加した時点で(というかdivがある時点で)文法違反になっていませんか?
>ブラウザ上で「ソースを表示する」で取得したhtmlソースは(1)初期状態~~
ブラウザの「ソースの表示」は常に「ソース」を表示するようになっています。
変更されたDOMを確認する場合は、スクリプトで表示させるか、あるいは開発用のツールなどで御確認ください。(最近のブラウザには装備されているものもあるかと思います)
さて、元のご質問文にあるソートのスクリプトですが
>$('#list > li')~~
となっていますので、<div>内の<li>要素は対象にならないので、(元からある)<li>要素だけが対象になります。
さらにその結果を、
>$('#list').html(~~)
としていますので、結果的に、対象外のものは削除されることになります。
これが直接の原因ではないですか?
この辺りを調整すれば、意図なさったようになるかと…
アドバイスありがとうございます。
$("#updates").append(html);の部分を$("#list").append(html);に修正して<li>を追加することで実現できました。
No.1
- 回答日時:
よくわかってませんが…
追加取得したあとの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)ソートを行い並べ替えをした後、ですべて同じソースになっています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- PostgreSQL 画像とカテゴリーを出力したいのですが、取得の条件を付ける方法がわかりません。 2 2022/05/01 18:03
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryのeqで最後からn番目以降...
-
jQueryでネスト構造の<li>がク...
-
onmouseoverの表示切り替えが上...
-
固定ナビのJqueryのアコーディ...
-
div要素をランダムに表示させたい
-
マウスオーバーで開閉できるア...
-
JSの変数をHTMLに渡す方法
-
jquery 3の倍数のliだけ色を変える
-
javascript INNERHTMLについて
-
オブジェクトがありませんのエラー
-
jQueryの配列の渡し方について
-
JQuery UIで、表示したタブの中...
-
jQuery タブメニューへのダイ...
-
javascriptでsplitが上手く動作...
-
JavaScriptで、?マークとコロ...
-
jqueryで、○○ is undefind
-
jQueryセレクタ/複数要素の指...
-
JavaScript インクリメントの書...
-
javascriptテキストBOX色を元に...
-
javascriptで毎月替わる画像
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
どの<li><a> が押されたか判別...
-
【javascript で動的に a タグ...
-
文字と数字が混在する要素のsor...
-
javascriptでEnterキーをtabキ...
-
チェックボックスに入っている...
-
複数のラジオボタン項目でのテ...
-
jquery ドロップダウンメニュー...
-
jQueryのeqで最後からn番目以降...
-
JavaScriptで、?マークとコロ...
-
質問に答えていくと、回答によ...
-
Jqueryでリストのスクロール
-
多階層ドロップダウンのスマホ...
-
JQueryタブのアクティブ アン...
-
gridstack.jsについて教えてく...
-
タブ切り替えの初期表示について
-
オンマウスで画像ロールオーバ...
-
「jQuery」アコーディオンメニ...
-
複数の画像をランダム(シャッ...
おすすめ情報