代码之家 › 专栏 › 技术社区 › Bojan Kolano

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

inner-classes json css jquery javascript

Bojan Kolano · 技术社区 · 8 年前

反正我有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为空,第一个div为空。

有什么帮助或提示吗?

1 回复 | 直到 8 年前

het0 8 年前

使用eq错误,将匹配项从$('.list div ul li')删除到指数匹配。

应该是这样的:

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