定义数组的长度在javascript中返回0答案

【问题标题】：Defined array's length returns 0 in javascript定义数组的长度在javascript中返回0
【发布时间】：2017-05-10 08:26:11
【问题描述】：

我一直在尝试制作一个既设置元素颜色又设置元素 id 的小脚本，但是当我尝试制作元素数组时，array.length 返回 0：

JavaScript/jQuery：

var maintabArr = [];
var subtabArr = [];

$(document).ready(function() {
    //replacing the navplaceholder with navbar
  $.get("http://link.link/navbar.html", function(data) {
    $("#nav-placeholder").replaceWith(data);
  });

  maintabArr = document.getElementsByName("maintab");
  subtabArr = document.getElementsByName("subtab");

  console.log(maintabArr);
  console.log(subtabArr);
  console.log(maintabArr.length);
  console.log(subtabArr.length);

  for(var i=0;i<maintabArr.length;i++){    
    maintabArr[i].style = "background-color: rgb(" + maintabArr[i].bgcolor + ");";
    console.log(i);
  }

  for(i=0;i<maintabArr.length;i++){  
    maintabArr[i].id = maintabArr[i].name;
    console.log(i);
  }

  for(i=0;i<subtabArr.length;i++){  
    subtabArr[i].id = subtabArr[i].name;
    console.log(i);
  }

  for(i=0;i<maintabArr.length;i++){
    console.log("Name: " + maintabArr[i].name + ", Name's var type: " + typeof maintabArr[i].name + " | Bgcolor: " + maintabArr[i].bgcolor + ", Bgcolor's var type: " + typeof maintabArr[i].bgcolor);
    console.log(i);
  }
  for(i=0;i<subtabArr.length;i++){
    console.log("Name: " + subtabArr[i].name + ", Name's var type: " + typeof subtabArr[i].name + " | Bgcolor: " + subtabArr[i].bgcolor + ", Bgcolor's var type: " + typeof subtabArr[i].bgcolor);
    console.log(i);
  }
 });

navbar-HTML，这个get被导入到主HTML中：

<div id="navbar">
<ul>
    <li><a bgcolor="255,0,0" href="http://link.link/" name="maintab">Home</a></li>
    <li><a bgcolor="255,0,0" href="http://link.link/#games" name="subtab">Games</a></li>
    <li><a bgcolor="255,0,0" href="http://link.link/#movies" name="subtab">Movies</a></li>
    <li><a bgcolor="255,0,0" href="http://link.link/#about" name="subtab">About</a></li>
    <li><a bgcolor="0,0,255" href="http://link.link/apps.html" name="maintab">Apps</a></li>
    <li><a bgcolor="0,255,0" href="http://link.link/forum.html" name="maintab">Forum</a></li>
    <li><a bgcolor="0,255,0" href="http://link.link/forum.html#FAQ" name="subtab">FAQ</a></li>
    <li><a bgcolor="160,82,45" href="http://link.link/log.html" name="maintab">LOG</a></li>
    <li><a bgcolor="166,157,184" href="http://link.link/homework.html" name="maintab">HW</a></li>
    <li><a bgcolor="213,187,107" href="http://link.link/homework.html" name="maintab">PO</a></li>
</ul>

现在，当我进入我的网站并在控制台中查看时，它显示两个数组的长度均为 0。

请帮忙

【问题讨论】：

你的导航栏$("#nav-placeholder") 被填充了吗？它工作正常。
当您调用 getElementsByName 函数时，您对 navbar.html 的 get 调用可能还没有完成（该函数的默认行为是异步的）。您需要将所有进一步的代码放入成功回调中。

标签： javascript jquery html css arrays

【解决方案1】：

您的问题可能是$.get 是异步的，这意味着它下面的代码可以在回调函数之前执行。只需将您的功能移入该功能即可。

var maintabArr = [];
var subtabArr = [];

$(document).ready(function() {
    //replacing the navplaceholder with navbar
  $.get("http://link.link/navbar.html", function(data) {
    $("#nav-placeholder").replaceWith(data);

    maintabArr = document.getElementsByName("maintab");
    subtabArr = document.getElementsByName("subtab");

    console.log(maintabArr);
    console.log(subtabArr);
    console.log(maintabArr.length);
    console.log(subtabArr.length);

    for(var i=0;i<maintabArr.length;i++){    
      maintabArr[i].style = "background-color: rgb(" + maintabArr[i].bgcolor + ");";
      console.log(i);
    }

    for(i=0;i<maintabArr.length;i++){  
      maintabArr[i].id = maintabArr[i].name;
      console.log(i);
    }

    for(i=0;i<subtabArr.length;i++){  
      subtabArr[i].id = subtabArr[i].name;
      console.log(i);
    }

    for(i=0;i<maintabArr.length;i++){
      console.log("Name: " + maintabArr[i].name + ", Name's var type: " + typeof maintabArr[i].name + " | Bgcolor: " + maintabArr[i].bgcolor + ", Bgcolor's var type: " + typeof maintabArr[i].bgcolor);
      console.log(i);
    }
    for(i=0;i<subtabArr.length;i++){
      console.log("Name: " + subtabArr[i].name + ", Name's var type: " + typeof subtabArr[i].name + " | Bgcolor: " + subtabArr[i].bgcolor + ", Bgcolor's var type: " + typeof subtabArr[i].bgcolor);
      console.log(i);
    }

  });

 });

【讨论】：