JSONファイルローディング中に表示される「Now Loading」を非表示にしたい

Question

前提・実現したいこと

jsonファイル ローディング中に表示される項目B（※1）の「Now Loading」の表示を非表示にしたい
項目A（※2）はjsonファイルのロードが完了すると非表示になる
Now Loadingの設定箇所はソースコード中にコメントを入れています

※1 ソースコード中のparent['20'] = "B"の箇所;
※2 ソースコード中のparent['10'] = "A"の箇所;

※ 画面イメージ
----------------------------
項目A
----------------------------
記事がロードされ、Now Loading
が非表示になる

----------------------------
項目B
----------------------------
記事がロードされた後も
「Now Loading」が表示されたまま

該当のソースコード

<div class="example_area">
{foreach from=$dai item=item name=dai key=key}
	<h3 class="heading" id="a{$key}">{$item}</h3>
	<table id="parent{$daiid[$key]}">
	    <tr><th>項目</th><th>質問</th><th>執筆日</th></tr>
	</table>
    // Now Loading画面表示　
    <div id="no_new_data" style="text-align: center; padding-top:4em;"><img alt="Loading..." src="/files/user/images/sp/common/icon-loader.gif"><div>Now Loading</div></div>
{/foreach}
</div>

<script type="text/javascript">
{literal}
var parent=[];
parent['10'] = "A";
parent['20'] = "B";
var child=[];
child['10010'] = "AAA";
child['10020'] = "BBB";

(function($){
    var json_data = '';
    var json_num = '';

    // json取得
    $.ajax({
        type: 'GET',
        url: '/example_tag_json2/?data_format=json',
        dataType: 'json'
    })

    .done(function(json) {
　　　　 $("#json_loading").empty("");
        dspList(json);
    })
    .fail(function( jqXHR, textStatus, errorThrown ) {
    //alert('データ取得に失敗しました');
    //alert(textStatus);
    //alert(errorThrown);
    })
    .always(function(json) {    
    });
    
    function dspList(json)
    {
        var tmpId = '';
        var tmpChild = '';
        var tmpDate = '';
        var tmpStr = '';   
        var item_others_exists = false;

        for(var i=0; i < json.length; i++){
            // ループ内なので変数初期化
            tmpId = '';
            tmpChild = '';
            tmpDate = '';
            tmpStr = '';
            
            // Loading画面を非表示にする
            $("#no_new_data").html("");
            $("#no_new_data").css("padding-top", "");
            
            // 大項目に値が存在していたら該当する大項目に行を追加
            if (json[i].ext_col_xxx) {
                // idは「parent +（大項目キー）」
                tmpId = "#parent" + json[i].ext_col_xxx;
                // 小項目値セット
                if (child[json[i].ext_col_xxx]) {
                    tmpChild = child[json[i].ext_col_xxx]
                }
                // 日付成形
                tmpDate = json[i].ymd.replace(/-/g, '/');
                
                // <tr>文字列生成
                tmpStr = "<tr>";
                tmpStr = tmpStr + "<td>" + tmpChild + "</td>";
                tmpStr = tmpStr + "<td><a href=\"/example/detail/id=" + json[i].example_id + '\" title=\"' + json[i].subject + '\">' + json[i].subject + "</a></td>";
                tmpStr = tmpStr + "<td>" + tmpDate + "</td>";
                tmpStr = tmpStr + "</tr>\n";
                // <table>に<tr>をappend
                $(tmpId).append(
                    (tmpStr)
                );
                // 「その他」だけ表示制御
                if (json[i].ext_col_xxx == 'xxx') {
                    item_others_exists = true;
                }
            } else {
            }
        }
        if (!item_others_exists) {
            $("#parentxxx").css("display", 'none');
            $("#a9").css("display", 'none');
        }
    }
})(jQuery);
{/literal}
</script>

{/if}

Answer 1

#json_loadingの要素がありません。
また、foreachの中でid="no_new_data"を書いていますが、同一HTML内でidは重複できません。

Comments

[pond]

ありがとうございます。
ご指摘の箇所を修正し、Loading画面のhtml、cssを空にする設定を.always(function(json)
へ移動してみたのですが、項目A・B両方のLoading画面が消えなくなってしまいまして
指定方法が間違ってるんでしょうか？

[pond]

ソースコード修正しております。

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」してください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

[kei344]

何のフレームワークを使っているかはわかりませんが、$("#no_new_data{$daiid[$key]}") がどう変数展開されているかを確認してください。classを使わないでidに縛る理由もよくわかりません。

[pond]

ご指摘ありがとうございます。
質問中のソースコードは元に戻しました、$("#no_new_data{$daiid[$key]}")
の変数展開を確認いたします。
また修正した箇所を下記へ記載いたします。

修正箇所 ①
　id修正　no_new_data{$daiid[$key]}へ変更
修正箇所 ②
　Loading画面のhtml・cssを空にする設定を.always(function(json) {}へ移動

[pond]

kei344さん、class指定しました。
下記のように変更したところうまくいきました。ありがとうございました。

① Loading画面にclassを追加
<div id="no_new_data{$daiid[$key]}" class="no_new_data" style="text-align: center; padding-top:4em;"><img alt="Loading..." src="/files/user/images/sp/common/icon-loader.gif"><div>Now Loading</div></div>
② .always(function(json) {}でclass指定
.always(function(json) {
$(".no_new_data").html("");
$(".no_new_data").css("padding-top", "");
});