Question

我正在使用包含大量HTML值的JSON。下面是JSON的简化版本，可帮助您实现可视化：

{
"header" : "<a class='widget'>widget</a>
            <a class='widget'>widget</a>
            <ul class='header'>
                 <li>link1</li>
                 <li>link2</li>
                 <li>link3</li>
            </ul>"
            <a class='random'>random link</a>
            <a class='random'>random link</a>,

"footer" : "<a class='social'>social</a>
            <a class='social'>social</a>
            <ul class='footer'>
                 <li>link1</li>
                 <li>link2</li>
                 <li>link3</li>
            </ul>"
 }

我无法找到加载JSON的方法，解压缩'ul.header'，并将其注入div（使用jQuery）：

<div class="giveMeHeaderList"></div>

最终结果应如下所示：

<div class="giveMeHeaderLinks">
    <ul class='header'>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
    </ul>
</div>

（如果JSON的格式不正确，我很抱歉，因为我快速键入它并且仅用于显示目的）

感谢您的帮助！

Answer 1

假设你有这个JSON：

htmltext = {"header": "<span><ul><a class='widget'>widget</a></ul></span>", "footer":"<a class='foot'>footer</a>"}

您有以下HTML代码：

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>

<body>
    <div class="giveMeHeaderList">test</div>
</body>

运行以下JS将产生你想要的东西：

$(".giveMeHeaderList").append($(htmltext.header).find('ul'));

使用jQuery .find，在html中查找<ul>元素并将其附加到相关内容。

htmltext是您的JSON所在的位置，header是相关的JSON元素

Answer 2

这样做：

Demo

var obj = JSON.parse(json);

$('.giveMeHeaderList').append($('<div>' + obj.header + '</div>').find('ul.header'));

Answer 3

最佳解决方案是：

$.post("url/", {},
        function (data/*({header: "<ul>...</ul>"})*/, textStatus) {
          $("#giveMeHeaderLinks").html(data.header)
        }, 
"json");

但是，你只需要注入一部分标题值，试试这个;

$.post("url/", {},
        function (data, textStatus) {
          $("#giveMeHeaderLinks").append($("<div>"+data.header+"</div>").find("ul.header"));
        }, 
"json");

使用jQuery获取JSON值的一部分并将其注入div

3 个答案: