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

Iterate Nested JSON with Jquery and return matched index?

本文关键字：返回 索引 JSON Jquery 迭代 嵌套 使用      更新时间：2023-09-26

如果我有一个嵌套的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>

谢谢！

更改此项：

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>');
    });
});

bgs是一个数组，您不应该将其包装在jquery中，只需使用它：

var bg = bgs[i];
相关文章：