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

Posted 2023-05-08

【中文标题】无法在不同的 div 中填充列表元素

【英文标题】：Failing to populate list elements in different divs

【发布时间】：2018-12-09 20:22:50

【问题描述】：

无论如何，我有 3 个 divs，其中包含不同的 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是空的，第一个是ok的。

任何帮助或提示？

【参考方案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);
            
        
    

【讨论】：

完美！感谢您的帮助！