javascript - 无法让 jQuery 创建正确的 HTML

Question

我正在使用通过 jQuery 解析的 json 数据创建 Accordion 菜单。数据已导入并按应有的方式显示。但是，正在创建的 HTML 不正确，我不确定问题出在哪里。这是我需要通过 jQuery 创建的 HTML:

<div id="pselector">
<div class="accordion accordion-bg clearfix">
    <div class="acctitle" >Category 1</div>
    <div class="acc_content clearfix">Product1</div>

    <div class="acctitle">Category 2</div>
    <div class="acc_content clearfix">Product 2</div>

    <div class="acctitle">Category 3</div>
    <div class="acc_content clearfix">Product 3</div>

    <div class="acctitle">Category 4</div>
    <div class="acc_content clearfix">Product 4</div>

    <div class="acctitle">Category 5</div>
    <div class="acc_content clearfix">Product 5</div>

    <div class="acctitle">Category 6</div>
    <div class="acc_content clearfix">Product 6</div>

</div>
</div>

这是我当前的 jQuery 脚本:

<script>
    $.getJSON('https://example.com/api/products/GetProductList/', function(data) {
        var output = '<div class="accordion accordion-bg clearfix">';
        for (var i in data.Categories) {
            output += '<div class="acctitle">' + data.Categories[i].Category + "</div>";
            output += '<div class="acc_content clearfix">';
            for (var j in data.Categories[i].Products) {
                output += data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost + " USD";
            }
            output += "</div>";
        }
        output += "</div>";

        document.getElementById("pselector").innerHTML = output;
    });
</script>

当我查看创建的 HTML 时，它看起来是正确的，但在浏览器中显示不正确。我忽略了什么？

Answer 1

我在这里看到的问题是您试图将 <li> <div> 中的元素.具有 acc_content 类的 div 应该是 <ul> (无序列表)或 <ol> (有序列表)但是 <ul>可能是你想要的。试试这个

   $.getJSON('https://example.com/api/products/GetProductList/', function(data) {
        var output = '<div class="accordion accordion-bg clearfix">';
        for (var i in data.Categories) {
            output += '<div class="acctitle">' + data.Categories[i].Category + "</div>";
            output += '<ul class="acc_content clearfix">';
            for (var j in data.Categories[i].Products) {
                output += '<li>' + data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost + " USD  </li>";
            }
            output += "</ul>";
        }
        output += "</div>";

        document.getElementById("pselector").innerHTML = output;
    });