javascript - 用ajax获取json数据。页面上显示节点已经成功创建。但获取类名，控制台显示该对象集合长度为0，为什么长度为0？
本文介绍了javascript - 用ajax获取json数据。页面上显示节点已经成功创建。但获取类名，控制台显示该对象集合长度为0，为什么长度为0？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我是自学前端没多久，基础比较差，希望各位大神能解释得简单点。在此谢过大家~
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)
解决方案
控制台报错里三个都是404，就是找不到文件而已。节点长度为0我觉得是执行时机的问题，因为Ajax是异步回调的，也就是说，你这个下边的$(".typechange");在执行时，$.get的回调并不一定就是已经执行完的状态，并且我觉得这么大段的innerHTML，执行时间大概够$(".typechange");跑好几圈了。如果想看到打印出对象，把这个$(".typechange");写到Ajax回调里就好~
另外提两个点：
var ajaxrun = function(){}然后再跟ajaxrun();这里感觉没什么必要，建议精简掉以减小代码阅读的难度；这么大段的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文件所以并没跑测试……题主留着参考吧~
这篇关于javascript - 用ajax获取json数据。页面上显示节点已经成功创建。但获取类名，控制台显示该对象集合长度为0，为什么长度为0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
