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

时间:2017-05-10 08:26:11

标签: javascript jquery html css arrays

我一直在尝试创建一个既设置颜色和元素id的小脚本,但是当我尝试创建元素数组时,array.length返回0:

的JavaScript / jQuery的:

<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>

navbar-HTML,此get被导入主HTML:

{{1}}

现在,当我进入我的网站并查看控制台时,它表示两个数组的长度均为0.

请帮忙

1 个答案:

答案 0 :(得分:4)

您的问题可能是$.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);
    }

  });

 });