Javascript函数打印到单独页面jquery mobile上的div中

我有一个Javascript函数，可以打印json文件中的各种信息，并以目录的方式显示。它解析信息并将其打印到“ui-grid-b”div中，因为我希望它们以3行为一行。每次打开页面时，javascript都会重复打印，因此我添加了一个函数，以便在每次打印时清除div。但是，当我打开一个包含“ui-grid-b”div的新单独页面时，它会清除该div并再次打印目录。以下是js代码，希望您能提供帮助：

            <script type="text/javascript">

        var grid= new Array();
        grid[0]= "a";
        grid[1]= "b";
        grid[2]= "c";
        var j=0;

        var color= new Array();
        color[0]= '#00c6c4;';
        color[1]= '#6fc41b;';
        color[2]= '#ffbd0c;';
        color[3]= '#ff84f1;';
        color[4]= '#1fbbff;';
        color[5]= '#ff1700;';
        color[6]= '#976833;';
        var k=0;


        $(document).on("pageinit", "#Page1", function(){


          var imp= "Json/empirical.json";
          $.getJSON(imp, function(data) {
           j=0;
           k=0;
           var toc= '';
           $.each(data.tcontent, function(index, item) {
            if (j > 2) { j = 0; }
            if (k > 6) { k = 0; }
            toc += "<div class='ui-block- ' " + grid[j] + " '>" + item.url + '<div class="grid" style="background-color: ' + color[k] + ' ">' + "<p class='gridtext'>"  + item.Name  + "</p>" +  "</div>" + "</a>" + "</div>"
            j++;
            k++;
          });


           $(".ui-grid-b").empty().append(toc);
         });
        });


        </script> 

var grid=新数组（）；
网格[0]=“a”；
网格[1]=“b”；
网格[2]=“c”；
var j=0；
var color=新数组（）；
颜色[0]=“00c6c4；”；
颜色[1]=“6fc41b；”；
颜色[2]='#ffbd0c；'；
颜色[3]=“ff84f1；”；
颜色[4]=“1FBFF；”；
颜色[5]=“ff1700；”；
颜色[6]=“976833；”；
var k=0；
$（document）.on（“pageinit”、“#Page1”，function（）{
var imp=“Json/emerical.Json”；
$.getJSON（imp，函数（数据）{
j=0；
k=0；
var-toc=''；
$.each（data.t内容、函数（索引、项）{
如果（j>2）{j=0；}
如果（k>6）{k=0；}
toc+=“为您的toc网格分配一个唯一的ID:

<div id="theTOC" class="ui-grid-b"></div>

做

确保此id在所有页面上都是唯一的。还要确保您的页面具有唯一的id（即只有一个称为“Page1”的页面）

$(".ui-grid-b").empty().append(toc);

$("#theTOC").empty().append(toc);