定義された配列の長さは、javascriptで0を返します

Question

要素の色と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); 
    } 
}); 

ナビゲーションバー-HTML、この取得の主な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> 

は今、私は私のサイトに行くと、コンソールで見たときには、両方の配列を意味しているあなたの問題は、おそらくその$.getある

Answer 1

が非同期で助けてください0

の長さを持っていると言うこと、それ以下のコードコールバック関数の前に実行することができます。機能をその機能に移すだけで機能します。

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); 
    } 

    }); 

});