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

用Jquery迭代嵌套的JSON并返回匹配的索引？

2 个答案: