0

我正在尝试创建一个简单的列视图，它允许我探索嵌套数组。目标是让用户单击“名称”列中的“名称”，并让相应的电影列表出现在下一列中。例如，我会提供一个这样的 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 元素的“索引”属性，并使用它来挑选适当的索引来检索电影数组。

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

4

1 回答 1

1

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

$.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>直接绑定到一组电影。data-moviesdata-id

于 2012-05-05T05:20:57.700 回答