今天我遇到一个js代码的执行问题,
上代码
$("#primary_menu .nav-menu").append("<li class=\"\">\n" + " <a href=\"//category/"+data+"\">\n" + " <div class=\"num-wrap\"><span>98</span></div>\n" + " <div class=\"nav-name\">"+data.parentCategory.name+"</div>\n" + " </a>\n" + " <ul class=\"sub-nav\">") $(data.childCategory).each(function () { $("#primary_menu .nav-menu").append("<li><a href=\"//www.bilibili.com/v/anime/serial/\"><span>"+this.name+"</span></a></li>") }) $("#primary_menu .nav-menu").append("</ul></li>")
上面是父分类,下面是子分类,我发现那个遍历所有子分类并添加到nav-menu的方法会最后执行,
然后我猜测了一下,each方法是异步执行的,在之前就执行最后的添加</ul></li>方法了,导致
没出来想要的效果
在插入子分类之前就封口了
后来我把要插入的html代码通过字符串拼接到一起,就解决了
var content="<li class=\"\">\n" + " <a href=\"//category/"+data+"\">\n" + " <div class=\"num-wrap\"><span>98</span></div>\n" + " <div class=\"nav-name\">"+data.parentCategory.name+"</div>\n" + " </a>\n" + " <ul class=\"sub-nav\">"; $(data.childCategory).each(function () { content+="<li><a href=\"//www.bilibili.com/v/anime/serial/\"><span>"+this.name+"</span></a></li>"; }) content+="</ul></li>" $("#primary_menu .nav-menu").append(content)