在 JavaScript 中访问数组中的数组中的元素

Question

index.html 的Pastebin：http://pastebin.com/g8WpX6Wn（这可行，但有一些损坏的 img 链接且没有 css）。

如果您想查看整个项目，请压缩文件：

我试图在单击图像时动态更改 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 中每个元素的 for 循环，然后将 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
    });
  });
}