Question

我正在尝试创建一个简单的列视图，这将允许我探索嵌套数组。目标是让用户点击“名称”列中的“名称”，并在下一列中显示相应的电影列表。例如，我提供了一个像这样的JSON数组：

var array = [
    {
        "name":"sean connery",
        "index":0,
        "movies": [
            {"name": "Goldfinger",
             "id": 43},
            {"name":"Thunderball",
             "id":103}
            ]
    },{
      "name":"pierce brosnan",
        "index":1,
        "movies": [
            {"name": "Goldeneye",
             "id": 22},
            {"name":"The world is not enough",
             "id":100}
            ]  

    }
    ]

基本上，我有点作弊，以便检索相应名称的电影数组。我读取了附加到li元素的'index'属性，并使用它来选择适当的索引来检索movies数组。

// sorts alphabetically 
array.sort(function(a, b) {
    return b.name < a.name ? 1 : b.name > a.name ? -1 : 0;
});

$.each(array, function(index, value){
   listitem = document.createElement('li');
$(listitem).html(value.name).appendTo($("ul#list")).attr("data-id",value.index);        
});

//make it a scrollbox
$("ul#list").scrollTop(); 

//click to display movies
$("ul#list li").click(function(){
 var id = $(this).attr("data-id"); 
movies = array[id].movies;
    console.log(movies); 
});

但这似乎不是理想的方法。看起来应该有一种方法来检索适当的电影数组，而无需改变DOM。有什么建议？或者我正在做一个合法的方式？

谢谢！以及包含我的代码的小提琴：http://jsfiddle.net/bmcmahen/WXvWv/2/

Answer 1

你可以更进一步，使用data将整个电影数组附加到<li>：

$.each(array, function(index, value) {
    var $li = $('<li>').html(value.name).data('movie', value.movies);
    $('ul#list').append($li);
});

$("ul#list li").click(function() {
    console.log($(this).data('movie'));
});

演示：http://jsfiddle.net/ambiguous/Ug43b/

或者，如果在您的情况下没有意义，您可以使用index找出<li>在<ul>内的位置，并使用它来索引数组：

$.each(array, function(index, value) {
    var $li = $('<li>').html(value.name)
    $('ul#list').append($li);
});

$("ul#list li").click(function() {
    var i = $('ul#list li').index(this);
    console.log(array[i].movies);
});

如果您愿意，也可以缓存$('ul#list li')：

var $lis = $('ul#list li');
$lis.click(function() {
    var i = $lis.index(this);
    console.log(array[i].movies);
});

演示：http://jsfiddle.net/ambiguous/kbvGf/

你走哪条路当然取决于你的具体情况。 index方法确实要求您的<ul>与array完全匹配，这可能是一个问题，使用数据属性可以通过将每个<li>直接绑定到a来很好地回避此问题电影集直接通过data-movies或间接通过data-id中的索引。

javascript：在列视图中显示嵌套数组

1 个答案: