Повторять вложенный 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 ^{[документы]} , так что вы не нацеливаетесь на новые элементы <ul>, которые уже были прилагается.

(я думаю, > на самом деле не нужно в этом случае, так как вы очищаете содержимое #items ul при каждом клике.)

Live Пример: 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];