【问题标题】:Iterating an array that is nested with an object key迭代与对象键嵌套的数组
【发布时间】:2013-08-14 22:09:15
【问题描述】:
var html = {
easyBB :   
['easybbtutorials','www.easybbtutorials.com','http://i76.servimg.com/u/f76/17/83/35/07/easybb10.png'],
AvacWeb:
['AvacWeb','www.avacweb.com','http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png'],
easyBB2:
['easybbtutorials','www.easybbtutorials.com','http://i76.servimg.com/u/f76/17/83/35/07/easybb10.png'],
AvacWeb2 : 
['AvacWeb','www.avacweb.com','http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png'],
easyBB3 :
['easybbtutorials','www.easybbtutorials.com','http://i76.servimg.com/u/f76/17/83/35/07/easybb10.png'],
AvacWeb3 : 
['AvacWeb','www.avacweb.com','http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png']
};
 var cont = document.getElementById('container');
  for(var key in html){
   for(var i =0;i<key.length;i++ ){
     var name= '<span class="name">'+html[key][0] +'</span>',
     link = '<span class="url"><a href="'+html[key][1]+'">'+html[key][1] +'</a></span>',
     image = '<img src="'+html[key][2]+'" title="'+html[key][0]+'" />';        
     cont.innerHTML= '<div class="wrapper">'+ name + '<br />'+image+'<br />'+link+'</div>';
      i++;
   }
 }

我正在尝试遍历我创建的 HTML 对象的每个键中的数组问题不知道该怎么做我现在已经尝试了多种方法,我相信(因为我发布)我做错了.我也试过这样做:html[key[i]][0] 虽然我当然得到了一个错误 i 没有定义。任何建议我做错了什么,截至目前它只是将一个数组发布到 html。

【问题讨论】:

  • html['easyBB'][0]html.easyBB[0]
  • 看起来你只需要摆脱你的内部 for 循环......

标签: javascript arrays loops object


【解决方案1】:

问题不在于迭代,而在于线

cont.innerHTML = ...

每次循环迭代时都会替换内容,以便您只能看到最终项目(“AvacWeb3”)。

改成

cont.innerHTML += ...

并摆脱不需要的 for (var i =0 ... 循环。 (jsfiddle)

【讨论】:

  • 叮叮叮我们赢了!谢谢哈哈,我真是个笨蛋,我在之后添加了for循环,因为我本身确实有常规for in,我从没想过要看innerHTML!我正在尝试只编写纯 JS 我首先学习了 jQuery,所以在总是使用 .append 之后它让我失望了,谢谢 Stuart!
【解决方案2】:
for(var i = 0; i < html[key].length; i++){
...

【讨论】:

    【解决方案3】:

    你应该做 html[key][i][0].
    你也应该按照 Trevor 说的做,用 html[key].length 代替 key.length。

    例如,通过将 html[key] 分配给 var currentkey 让自己变得轻松,更易于跟踪。

    另外,看看array.forEach,只是为了好玩;)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-14
      • 2020-05-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-20
      • 1970-01-01
      相关资源
      最近更新 更多