XML読み込みで表示してるHTMLにJSを効かせたい

Question

###前提・実現したいこと
フォトギャラリーのHTMLページで、「もっと見る」を押すと10件ずつ表示されていく仕組みを実装中です。
写真のリスト部分は、jQueryでXMLを読み込み、HTMLに表示させているため、
ページ側に「もっと見る」のJSを書いても効きません。

XMLを読み込むJSかページ側のJS、どちらでもよいのですが、
「もっと見る」が効くようにするにはどうしたらいいでしょうか。

JSを自分で書く知識がないので、ぜひよろしくお願いいたします。

###発生している問題・エラーメッセージ
XMLで読み込まず、ソースを直接ページに書けば、「もっと見る」は動作していますが、
XML読み込みだと、そもそも全部が出た状態になってしまいます。

###該当のソースコード
■XML読み込みのJS

$(function(){
    $.ajax({
        url:'/photolist.xml',
        type:'GET',
        dataType:'xml',
        timeout:1000,
        error:function() {
            alert("ロード失敗");
        },
        success:function(xml){
          $(xml).find("entry").each(function() {
            data_append(
              $(this).find('name').text(),
              $(this).find('photo').text(),
              $(this).find('caption').text()
              );
          });
        }
    });

    function data_append(name, photo, caption) {

      $("#photoList ul").append('<li>'
        + '<img src="images/'+ photo +'" alt="'+ name +'" />'
        + '<p class="cap">'+ caption +'</p>'
        + '</li>');

    }
});

■10件ずつ表示JS（上記とは別の外部ファイル）

$(function(){
var n = $("#photoList li").length;
	$("#photoList li:gt(9)").hide();
	var Num = 10;
	$("#more").click(function(){
		Num +=10;
	$("#photoList li:lt("+Num+")").show(400);
		if(n <= Num){
			$("#more").hide();
		}
	})
});

###試したこと
XML読み込みのJSに10件ずつ表示JSを書くと、
ループして、表示件数分同じ記述が出てしまって、ダメでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

ご指摘ありがとうございます。修正いたしました。

Answer 1

書いておられるコードでは、「n」が更新されないため、XMLで追加した要素が残っていても「#more」が消えてしまうのでは。また、追加時に消えていないために、全て表示されるのではないでしょうか。

.off {
	display: none;
}

$( function() {
	var Num = 10;
	$( '#photoList li:gt(9)' ).addClass( 'off' );

	$( '#more' ).on( 'click', function() {
		var n = $( '#photoList li.off' ).length;
		$( '#photoList li.off:lt(' + Num + ')' ).removeClass( 'off' );
		if ( n - Num < 1 ) {
			$( '#more' ).hide();
		}
	} );

	$( '#photoList' ).on( 'additem', function() { // カスタムイベントに紐付け
		var n = $( '#photoList li.off' ).length;
		if ( n > 0 ) {
			$( '#more' ).show();
		}
	} );

	function data_append( name, photo, caption ) {
		$( '#photoList ul' ).append( '<li class="off">'	// 追加時に非表示にしておく
		  + '<img src="'+ photo +'" alt="'+ name +'" />'
		  + '<p class="cap">'+ caption +'</p>'
		  + '</li>'
		);

	}

	// for Test （ここ以降はテスト用なので、XMLの呼び出しと思ってください）
	$( '#fake-ajax' ).on( 'click', function() {
		var rand = Math.floor( Math.random() * 11 ); // なんとなく追加数が変わっても、というためにランダムで要素を作っています。（特に意味なし）
		for ( var i = 0; i < rand; i++ ) { // $(xml).find("entry").each() の代わり
			data_append( 'name:' + i, 'https://placehold.jp/12/cc9999/993333/60x20.png', 'caption:' + i );
		}
		// XMLからのロード後に実行（これが重要）
		$( '#photoList' ).trigger( 'additem' ); // カスタムイベントを実行（#moreを再表示させるため）
	} ).click();
	$( '#more' ).click(); //（このサンプル用の記述なので無視してください）
} );
```**動くサンプル：**[https://jsfiddle.net/u3nomftf/](https://jsfiddle.net/u3nomftf/)

Comments

[退会済みユーザー]

ありがとうございます。
XMLを読み込んで、無事「もっと見る」を押すと10件ずつ出てくるようになりました。

ただ初期状態は、表示0件で「もっと見る」だけが出てる状態になってしまいました。
初期は11件出ててほしいのですが、どのようにしたらよいでしょうか。

[kei344]

どのような実装をされたかによりますが、とりあえず11件までクラス「off」を付けなければ表示11件が実現出来ます。なので$( '#more' ).click();で強制的に10件表示とか、$( '#photoList li.off:lt(11)' ).removeClass( 'off' );とかすれば良いのではないでしょうか。

[退会済みユーザー]

ありがとうございます！無事、解決できました。
いろいろとご対応いただき、本当に助かりました。