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 要素に追加された '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/

4

1 に答える 1

1

<li>さらに進んで、movie 配列全体を 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する必要があり、それが問題になる可能性があります.data-attributeを使用すると、それぞれを映画のセットに直接または間接的にインデックスでバインドすることにより、この問題をうまく回避できます.<ul>array<li>data-moviesdata-id

于 2012-05-05T05:20:57.700 に答える