在JavaScript中訪問數組內的數組中的元素

Question

index.html的Pastebin：http://pastebin.com/g8WpX6Wn（此工作但有一些中斷的img鏈接&沒有CSS）。

Zip文件，如果你想看到整個項目：

我試圖動態改變div的內容，當我點擊的圖像。圖像具有相應的id（內部數組中的第一個索引），第一個內部數組中有另一個數組（索引3）。我想用點擊圖像時使用JQuery的鏈接來填充div（id =「articleLinks」）。

的JavaScript & JQuery的：

的管陣列。 *注意：tubeArray中每個元素的第一個索引是ID &新聞文章沒有鏈接到任何特定的東西。只關心tubeArray [0] & tubeArray [4]

var tubeArray = [ 
      ['UQ', -27.495134, 153.013502, "http://www.youtube.com/embed/uZ2SWWDt8Wg", 
       [ 
       ["example.com", "Brisbane students protest university fee hikes"], 
       ["example.com", "Angry protests over UQ student union election"], 
       ] 
      ], 
      ['New York', 40.715520, -74.002036, "http://www.youtube.com/embed/JG0wmXyi-Mw", 
       [ 
       ["example.com" , "NY taxpayers’ risky Wall Street bet: Why the comptroller race matters"] 
       ] 
      ], 
      ['To The Skies', 47.09399, 15.40548, "http://www.youtube.com/embed/tfEjTgUmeWw", 
       [ 
       ["example.com","Battle for Kobane intensifies as Islamic State uses car bombs, Syrian fighters execute captives"], 
       ["example.com","Jihadists take heavy losses in battle for Syria's Kobane"] 
       ] 
      ], 
      ['Fallujah', 33.101509, 44.047308, "http://www.youtube.com/embed/V2EOMzZsTrE", 
       [ 
       ["example.com","Video captures family cat saving California boy from dog attack"], 
       ["example.com","Fines of £20,000 for dogs that chase the postman"] 
       ] 
      ] 
     ]; 

一種用於環路經過在tubeArray每個元素然後分配ID到第一索引。另外一個圖像，調用功能myFunctionId它採取參數this.id。

for (i = 0; i < tubeArray.length; i++) { 
    var id = tubeArray[i][0]; 

    //other code 

    '<img src="img.png" onclick="myFunctionId(this.id);" id="' + id + '">' + 

    //other code 
} 

function myFunctionId (id) { 
     journal = id; 
     alert(journal) //just a test 

     //I want to search through tubeArray with the id and find the matching inner array. 

     //I then want to loop through the innerArray and append to my html a link using JQuery. 
     for (j = 0; i < innerArray.length; j++){ 
      //supposed to get "www.linkX.com" 
      var $link = ; 
      //supposed to get "titleX" 
      var $title = ; 

      //change the content of <div id="articleLinks"> 
      $('#articleLinks').append('<a href=$link>$title</a><br>'); 
     } 
} 

HTML：

<div id="articleLinks"> 
    <a href="http:/www.google.com">Example Link</a><br> 
</div> 

任何幫助將不勝感激。我試圖儘可能簡化&，以便它可讀。

Answer 1

或許這可能幫助：讓自己的地圖就像

var tubeArray = [ 
    [         // tubeArray[0] 
    'id',       // tubeArray[0][0] 
    int,        // tubeArray[0][1] 
    int,        // tubeArray[0][2] 
    [        // tubeArray[0][3] 
     [        // tubeArray[0][3][0] 
      "www.link1.com",   // tubeArray[0][3][0][0] 
      "title1"     // tubeArray[0][3][0][1] 
     ], 
     [        // tubeArray[0][3][1] 
      "www.link2.com",   // tubeArray[0][3][1][0] 
      "title2"     // tubeArray[0][3][1][1] 
     ] 
    ] 
    ], 

等 不知道這是否會有所幫助，但四維陣列的大腦破....

[編輯]

...，從而去喜歡的方式更OO：

var tubeArray = [ 
    'id' : {       // tubeArray[id] or tubeArray.id 
    'a': int,      // tubeArray.id.a 
    'b': int,      // tubeArray.id.b 
    'entries': [      // tubeArray.id.entries 
     {        // tubeArray.id.entries[0] 
      'url': "www.link1.com",  // tubeArray.id.entries[0].url 
      'title': "title1"   
     }, 
     {        // tubeArray.id.entries[1] 
      'url': "www.link2.com", // tubeArray.id.entries[1].url 
      'title': "title2"   ... 
     } 
    ] 
    ] , 

Answer 2

首先，您需要遍歷tubeArray，然後轉到4深度並在該級別的陣列陣列上循環。當然，你循環這些內部數組並得到元素0和1。

$.each(tubeArray, function(z, o){ 
    $.each(o[4], function(i, a){ 
    $.each(a, function(n, v){ 
     $('#articleLinks').append("<a href='"+v[0]+"'>"+v[1]+'</a>'); // use CSS to break lines 
    }); 
    }); 
}