Question

我正在使用通过jQuery解析的json数据创建一个手风琴菜单。导入数据并按原样显示。但是，正在创建的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;
    });

Answer 2

第一，我建议使用模板，而不是像手工那样“手动”构建html。

第二，如果您使用的是jQuery，则无需执行此操作：

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

这样做：

$("#pselector").html(output);

第3个你可以发布所述jQuery代码的输出吗？这将有助于确定出现了什么问题。

Answer 3

与上面的评论相反，你可以在DIV中拥有LI。问题是你有LI而没有UL或OL标签。没有它，它不会呈现LI。

无法让jQuery创建正确的HTML

3 个答案: