用ajax获取json数据。页面上显示节点已经成功创建。但获取类名，控制台显示该对象集合长度为0，为什么长度为0？

Question

我是自学前端没多久，基础比较差，希望各位大神能解释得简单点。在此谢过大家~

selectTab();

function selectTab(){
    var ajaxrun = function(){
        $.get("jason2.json",function(data){
            var imgDta=data;
            var html="";
            
            for(var i=0; i<imgDta.length; i++){
//                console.log("wo de"+imgDta.length)
                    html+='<div class="typechange">'+
//            --------------------1F——左切换部分区域-----------------------
                        '<div class="m-area">';
                        for(var k=0; k<imgDta[i].round.length; k++){
                            html+='<a class="fir-pic" href="/">'+
                            '<img src="'+imgDta[i].round[k].pic1+'">'+
                            '</a>'+
                            '<a class="sec-pic" href="/">'+
                            '<img src="'+imgDta[i].round[k].pic2+'">'+
                            '</a>'+
                            '<a class="thi-pic" href="/">'+
                            '<img src="'+imgDta[i].round[k].pic3+'">'+
                            '</a>';
                        }
                        html+='</div>'+
//            --------------------1F——右切换部分区域-----------------------                    
                        '<div class="r-area">'+
                            '<ul>';
                            
                                html+='<li>'+
                                '<a href="/">'+
                                '<img src="'+imgDta[i].round[0].pic4+'">'+
                                '</a>'+
                                '</li>'+
                                '<li>'+
                                    '<a href="/">'+
                                    '<img src="'+imgDta[i].round[0].pic5+'">'+
                                    '</a>'+
                                '</li>'+
                                '<li>'+
                                    '<a href="/">'+
                                    '<img src="'+imgDta[i].round[0].pic6+'">'+
                                    '</a>'+
                                '</li>'+
                                '<li>'+
                                    '<a href="/">'+
                                    '<img src="'+imgDta[i].round[0].pic7+'">'+
                                    '</a>'+
                                '</li>'+
                                '<li>'+
                                    '<a href="/">'+
                                    '<img src="'+imgDta[i].round[0].pic8+'">'+
                                    '</a>'+
                                '</li>'+
                                '<li class="long-pic">'+
                                    '<a href="/">'+
                                    '<img src="'+imgDta[i].round[0].pic9+'">'+
                                    '</a>'+
                                '</li>'+
                                '<li class="last-pic">'+
                                    '<a href="/">'+
                                    '<img src="'+imgDta[i].round[0].pic10+'">'+
                                    '</a>'+
                                '</li>';
                            html+='</ul>'+
                        '</div>'+
                    '</div>';                        
//                    $('.typechangeWrap').append(html).css('display','none');    
                    //$('.typechangeWrap').append(html);    
                    }
                    
                    $('.typechangeWrap').append(html);
        },"json")    
    }
    ajaxrun();    

}
    var typechange=$(".typechange");
    console.log(typechange)

Answer 1

控制台报错里三个都是404，就是找不到文件而已。节点长度为0我觉得是执行时机的问题，因为Ajax是异步回调的，也就是说，你这个下边的$(".typechange");在执行时，$.get的回调并不一定就是已经执行完的状态，并且我觉得这么大段的innerHTML，执行时间大概够$(".typechange");跑好几圈了。如果想看到打印出对象，把这个$(".typechange");写到Ajax回调里就好~

---

另外提两个点：

1. var ajaxrun = function(){}然后再跟ajaxrun();这里感觉没什么必要，建议精简掉以减小代码阅读的难度；

2. 这么大段的innerHTML，建议你改用$()逐个包装缓存，再一次性append进去的方式或者干脆，用模版写法吧。

---

加个修改后的（中间的字串拼接没动）：

function selectTab() {
    $.get('jason2.json')
        .done(function (data) {
            var imgDta = data;
            var html = '';
            for (var i = 0; i < imgDta.length; i++) {
                //                console.log("wo de"+imgDta.length)
                html += '<div class="typechange">' +
                    '<div class="m-area">';
                for (var k = 0; k < imgDta[i].round.length; k++) {
                    html += '<a class="fir-pic" href="/">' +
                        '<img src="' + imgDta[i].round[k].pic1 + '">' +
                        '</a>' +
                        '<a class="sec-pic" href="/">' +
                        '<img src="' + imgDta[i].round[k].pic2 + '">' +
                        '</a>' +
                        '<a class="thi-pic" href="/">' +
                        '<img src="' + imgDta[i].round[k].pic3 + '">' +
                        '</a>';
                }
                html += '</div>' +
                    '<div class="r-area">' +
                    '<ul>';
                html += '<li>' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic4 + '">' +
                    '</a>' +
                    '</li>' +
                    '<li>' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic5 + '">' +
                    '</a>' +
                    '</li>' +
                    '<li>' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic6 + '">' +
                    '</a>' +
                    '</li>' +
                    '<li>' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic7 + '">' +
                    '</a>' +
                    '</li>' +
                    '<li>' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic8 + '">' +
                    '</a>' +
                    '</li>' +
                    '<li class="long-pic">' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic9 + '">' +
                    '</a>' +
                    '</li>' +
                    '<li class="last-pic">' +
                    '<a href="/">' +
                    '<img src="' + imgDta[i].round[0].pic10 + '">' +
                    '</a>' +
                    '</li>';
                html += '</ul>' +
                    '</div>' +
                    '</div>';
            }
            $('.typechangeWrap').append(html);
        })
        .done(function () {
            var typechange = $('.typechange');
            console.log(typechange)
        });
}
selectTab();

---

又改了一版不过好像有点晚了……

function selectTab() {
    $.get('jason2.json')
        .done(function (data) {
            var imgDta = data;
            var html = [];
            $.each(imgDta, function (i, val) {
                // 构造几个包装对象
                var typechange = $('<div>').addClass('typechange');
                var mArea = $('<div>').addClass('m-area');
                var rArea = $('<div>').addClass('r-area');

                // 第一部分
                $.each(imgDta[i].round, function (j, pic) {
                    var pic1 = $('<img>').attr('src', pic.pic1).wrap('<a class="fir-pic" href="/" />');
                    var pic2 = $('<img>').attr('src', pic.pic2).wrap('<a class="sec-pic" href="/" />');
                    var pic3 = $('<img>').attr('src', pic.pic3).wrap('<a class="thi-pic" href="/" />');
                    mArea.append(pic1, pic2, pic3);
                });

                // 第二部分
                var iii = val.round[0]; // 缓存下偷个懒
                var pic4 = $('<img>').attr('src', iii.pic4).wrap('<li><a href="/"></a></li>');
                var pic5 = $('<img>').attr('src', iii.pic5).wrap('<li><a href="/"></a></li>');
                var pic6 = $('<img>').attr('src', iii.pic6).wrap('<li><a href="/"></a></li>');
                var pic7 = $('<img>').attr('src', iii.pic7).wrap('<li><a href="/"></a></li>');
                var pic8 = $('<img>').attr('src', iii.pic8).wrap('<li><a href="/"></a></li>');
                var pic9 = $('<img>').attr('src', iii.pic9).wrap('<li><a href="/"></a></li>');
                var pic10 = $('<img>').attr('src', iii.pic10).wrap('<li><a href="/"></a></li>');
                rArea.append(pic4, pic5, pic6, pic7, pic8, pic9, pic10);

                // 拼装
                typechange.append(mArea, rArea);

                // 缓存
                html.push(typechange);
            });
            $('.typechangeWrap').append(html);
        }).fail(function(){
            console.error('!!!ERROR');
        }).done(function () {
            var typechange = $('.typechange');
            console.info('--- typechange ---');
            console.dir(typechange);
        });
}
selectTab();

没有json文件所以并没跑测试……题主留着参考吧~

Answer 2

• 现状：就你贴出的代码来看，你在调用的函数selectTab()里面执行了一个异步请求，和selectTab()这个函数同步进行的console.log(typechange)这个语句是打印不出来的。

• 原因：js的异步请求不会影响同步加载，所以你在执行console.log(typechange)这句时，可能你的异步请求过程还没有走完，但是你能在页面看见这个DOM，是你看见的时候异步请求已经完成并渲染好页面了。所以是console.log(typechange)比异步渲染页面要快的。

• 解决：你可以尝试在异步请求完成之后再执行console.log(typechange)这句话。

• 最后：这部分涉及的是js的异步加载与同步加载的问题，可以查查扩展知识哦。