Итерация Вложенная JSON с JQuery и возвращаемый согласованный индекс?

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];