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

【问题标题】：Iterate Nested JSON with Jquery and return matched index?使用 Jquery 迭代嵌套 JSON 并返回匹配的索引？
【发布时间】：2014-04-29 23:27:38
【问题描述】：

如果我有一个嵌套的 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' />",""]
    }
}

如何将“slides”索引与每个项目的“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>

谢谢！

【问题讨论】：

标签： javascript jquery json

【解决方案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>');
    });
});

【讨论】：

【解决方案2】：

bgs 是一个数组，你不应该将它包装在 jquery 中，直接使用它：

var bg = bgs[i];

【讨论】：