使用 jQuery 获取部分 JSON 值并将其注入 div答案

【问题标题】：Use jQuery to get part of JSON value and inject it into a div使用 jQuery 获取部分 JSON 值并将其注入 div
【发布时间】：2013-11-01 06:37:34
【问题描述】：

我正在使用包含 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 的格式不正确，我深表歉意，因为我输入得很快，仅用于显示目的）

感谢您的帮助！

【问题讨论】：

标签： jquery html json extract inject

【解决方案1】：

这样就可以了：

Demo

var obj = JSON.parse(json);

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

【讨论】：

这很棒。但是，我实际上无法控制 JSON，因此无法将其转换为变量。有没有办法在不接触 JSON 的情况下实现这一目标？
非易失性！我只是将 'obj.header' 更改为 'data.header'，它就像一个宝石。谢谢！

【解决方案2】：

最好的解决办法是：

$.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");

【讨论】：

【解决方案3】：

假设你有这个 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 元素

【讨论】：

在我的测试中，这样做会附加整个值。我只需要该值的特定部分。在我的示例中，我只想要没有
标签的
。
@NickJ 非常感谢您对我的回答提出意见