javascript - 无法在不同的 div 中填充列表元素

Question

无论如何，我有 3 个 div，其中包含不同的 list 文本。我有 JSON 从中获取列表。但是我只得到第一个是满的，其他的都是空的。当我记录列表时，我得到了所有这些。您将能够在图片中看到这一点。

<div class="pricing">
    <div class="container-of-pricing">
        <div class="containers">
            <div class="container-title">
                <p class="cont-title"></p>
            </div>
            <div class="container-price">
                <p class="cont-price"></p>
            </div>
            <div class="list-div">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="button-div">
                <button class="select">SELECT</button>
            </div>
        </div>
        <div class="containers">
            <div class="container-title">
                <p class="cont-title"></p>
            </div>
            <div class="container-price">
                <p class="cont-price"></p>
            </div>
            <div class="list-div">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="button-div">
                <button class="select">SELECT</button>
            </div>
        </div>
        <div class="containers last-container">
            <div class="container-title">
                <p class="cont-title"></p>
            </div>
            <div class="container-price">
                <p class="cont-price"></p>
            </div>
            <div class="list-div">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="button-div">
                <button class="select">SELECT</button>
            </div>
        </div>
    </div>
</div>

JSON:

var db = '{"titleImage":{"source":"./images/trumpet.png"},"titleText":"Original Trombones","navMenuItems":{"menu":[{"navItem":"Features"},{"navItem":"How it works"},{"navItem":"Pricing"}]},"masterTitle":{"masterText":"Handcrafted, home-made masterpieces"},"howItWorks":{"video":"https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"},"menu":{"menuList":[{"menuItem":"Privacy"},{"menuItem":"Terms"},{"menuItem":"Contact"}]},"copyRight":{"copyRightText":"Copyright 2016, Original Trombones"},"premiumMaterials":[{"offerParagraf":[{"offerTitle":"Premium Materials","text":"Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase."},{"offerTitle":"Fast Shipping","text":"We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied."},{"offerTitle":"Quality Assurance","text":"For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument."}]}],"containers":[{"containerTitle":[{"contTitle":"TENOR TROMBONE"},{"contTitle":"BASS TROMBONE"},{"contTitle":"VALVE TROMBONE"}]},{"containerPrice":[{"contPrice":"$600"},{"contPrice":"$900"},{"contPrice":"$1200"}]},{"listDiv":[{"list":[{"item":[{"itemText":"Lorem ipsum."},{"itemText":"Lorem ipsum."},{"itemText":"Lorem ipsum dolor."},{"itemText":"Lorem ipsum."}]},{"item":[{"itemText":"Lorem ipsum."},{"itemText":"Lorem ipsum."},{"itemText":"Lorem ipsum dolor."},{"itemText":"Lorem ipsum."}]},{"item":[{"itemText":"Plays similar to a Trumpet"},{"itemText":"Great for Jazz Bands"},{"itemText":"Lorem ipsum dolor."},{"itemText":"Lorem ipsum."}]}]}]}]}';

以及我从中获取这些列表的 Java 脚本:

$(document).ready(function(){

var obj = JSON.parse(db);

footerData(obj);
pricingData(obj);
offersData(obj);
navigationData(obj);
masterpiecesData(obj);
videoData(obj);

});

function pricingData(obj){

for(i in obj.containers){
    for(j in obj.containers[i].containerTitle){

        $('.cont-title').eq(j).text(obj.containers[i].containerTitle[j].contTitle);
    }
}
for(i in obj.containers){
    for(j in obj.containers[i].containerPrice){

        $('.cont-price').eq(j).text(obj.containers[i].containerPrice[j].contPrice);
    }
}
//this is the one that is problematic**********************
for(i in obj.containers){
    for(j in obj.containers[i].listDiv){
        for(k in obj.containers[i].listDiv[j].list){
            for(p in obj.containers[i].listDiv[j].list[k].item){

                console.log(obj.containers[i].listDiv[j].list[k].item[p].itemText);
                $('.list-div ul li').eq(p).text(obj.containers[i].listDiv[j].list[k].item[p].itemText);

            }
        }
    }
}

};

这是我得到的控制台输出:

如你所见，其他div是空的，第一个没问题。

有什么帮助或提示吗？

Answer 1

您错误地使用了 eq，将匹配项从 $('.list-div ul li') 中删除到 index 匹配项。

应该是这样的:

for(i in obj.containers){
    for(j in obj.containers[i].listDiv){
        for(k in obj.containers[i].listDiv[j].list){
          var $ul = $('.list-div ul').eq(k)  
          for(p in obj.containers[i].listDiv[j].list[k].item){
              $ul.find('li').eq(p).text(obj.containers[i].listDiv[j].list[k].item[p].itemText);
            }
        }
    }
}