迭代使用Jquery嵌套JSON並返回匹配索引？

Question

如果我有一個嵌套的JSON對象：

var library = { 
    "Gold Rush": { 
     "slides": ["Slide 1 Text","Slide 2 Text","Slide 3 Text","Slide 4 Text"], 
     "bgs":["<img src='1.jpg' />","","<img src='2.jpg' />",""] 
    }, 
    "California": { 
     "slides": ["Slide 1 Text","Slide 2 Text","Slide 3 Text"], 
     "bgs":["","<img src='3.jpg' />",""] 
    } 
} 

怎樣的「幻燈片」指數匹配每個項目的「BGS」指數？ 我正在使用jQuery。這是我到目前爲止有：

HTML：

<div id="shows"> 
    <ul> 
     <li>Gold Rush</li> 
     <li>California</li> 
    </ul> 
</div> 

<div id="items"> 
    <ul></ul> 
</div> 

的Javascript：

var lib = JSON.parse(library); 

$('#shows li').bind('click', function() { 
    var title = $(this).text(); 
    var slides = (lib[title].slides); 
    var bgs = (lib[title].bgs); 
    $('#items ul').html(''); 
    $.each(slides, function(i){ 
     var bg = $(bgs).eq(i); // The problem seems to be here? 
     $('#items ul').append('<li><ul><li>'+this+'</li><li>'+bg+'</li></ul></li>'); 
    }); 
}); 

我希望是輸出爲演出 「加州」，看起來像這樣：

<div id="items"> 
    <ul> 
     <li> 
      <ul> 
       <li>Slide 1 Text</li> 
       <li></li> 
      </ul> 
     </li> 
     <li> 
      <ul> 
       <li>Slide 2 Text</li> 
       <li><img src='3.jpg' /></li> 
      </ul> 
     </li> 
     <li> 
      <ul> 
       <li>Slide 3 Text</li> 
       <li></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

謝謝！

Answer 1

更改此：

var bg = $(bgs).eq(i); 

這樣：

var bg = bgs[i]; 

...也，你應該改變這樣的：

$('#items ul') 

這樣：

$('#items > ul') 

...它使用child-selector^[docs]，這樣您就不會針對已添加的新元素<ul>。

（我猜>實際上不是必要的，這種情況下，因爲你清除的#items ul每次點擊的內容。）

活生生的例子：http://jsfiddle.net/uHKcd/1/

你也可以緩存#items > ul元素，因此您不必重新選擇它，特別是在$.each()循環中。

這裏的成品代碼：

var items_ul = $('#items ul'); 

$('#shows li').bind('click', function() { 
    var title = $(this).text(); 
    var slides = (lib[title].slides); 
    var bgs = (lib[title].bgs); 
    items_ul.html(''); 
    $.each(slides, function(i){ 
     var bg = bgs[i]; 
     items_ul.append('<li><ul><li>'+this+'</li><li>'+bg+'</li></ul></li>'); 
    }); 
}); 

Answer 2

bgs是一個數組，你不應該把它包在jQuery中，簡單地使用它：

var bg = bgs[i];