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

O_o华丽丽
  • 130

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

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)

图片描述

回复
阅读 2.5k
2 个回答

控制台报错里三个都是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文件所以并没跑测试……题主留着参考吧~

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏