如何按类别将外部JSON数据追加到Div？求JQuery/JS实现方案

没问题，我来帮你搞定这个按类别追加JSON数据到指定Div的需求！下面是用JavaScript和jQuery实现的完整方案，你可以直接拿去测试，也能在Fiddle里快速验证效果。

第一步：准备HTML结构 #

先创建两个分别对应books和games类别的容器Div，给它们设置好ID方便定位：

<!-- 存放书籍类数据的容器 -->
<div class="books" id="div1"></div>
<!-- 存放游戏类数据的容器 -->
<div class="games" id="div2"></div>

第二步：jQuery核心实现代码 #

假设你的外部JSON数据结构大概是这样的（如果结构不同，只需要调整字段匹配逻辑即可）：

[
  {"category": "books", "title": "JavaScript高级程序设计", "author": "Nicholas C. Zakas"},
  {"category": "games", "title": "塞尔达传说：王国之泪", "platform": "Switch"},
  {"category": "books", "title": "你不知道的JavaScript", "author": "Kyle Simpson"},
  {"category": "games", "title": "星空", "platform": "PC/Xbox"}
]

接下来用jQuery加载并处理数据：

// 加载外部JSON文件（替换成你的真实数据URL）
$.getJSON('your-data-source.json', function(data) {
  // 遍历每一条数据
  $.each(data, function(index, item) {
    // 根据category字段匹配目标Div
    let targetContainer;
    if (item.category === 'books') {
      targetContainer = $('#div1');
    } else if (item.category === 'games') {
      targetContainer = $('#div2');
    }

    // 构建要追加的HTML内容（可根据需求自定义结构）
    let itemHtml = `<div class="data-item">
                      <h4>${item.title}</h4>
                      ${item.author ? `<p>作者：${item.author}</p>` : ''}
                      ${item.platform ? `<p>平台：${item.platform}</p>` : ''}
                    </div>`;

    // 将内容追加到目标容器末尾
    targetContainer.append(itemHtml);
  });
})
// 处理数据加载失败的情况
.fail(function() {
  alert('数据加载失败，请检查URL是否正确！');
});

关键逻辑说明 #

• $.getJSON()：专门用于加载JSON格式的外部数据，比原生AJAX写法更简洁
• $.each()：快速遍历JSON数组中的每一项数据
• 条件判断：通过category字段精准匹配对应的Div容器
• append()：把构建好的HTML片段追加到容器末尾，不会覆盖原有内容

在Fiddle中快速测试的方法 #

如果暂时没有真实的外部JSON接口，可以用模拟数据测试：

1. 打开Fiddle编辑器，在HTML面板粘贴上面的容器代码
2. 在JavaScript面板粘贴以下代码（记得左侧选择jQuery框架版本）：

// 模拟外部JSON数据
const mockData = [
  {"category": "books", "title": "JavaScript高级程序设计", "author": "Nicholas C. Zakas"},
  {"category": "games", "title": "塞尔达传说：王国之泪", "platform": "Switch"},
  {"category": "books", "title": "你不知道的JavaScript", "author": "Kyle Simpson"},
  {"category": "games", "title": "星空", "platform": "PC/Xbox"}
];

// 遍历模拟数据并追加到对应Div
$.each(mockData, function(index, item) {
  let target = item.category === 'books' ? $('#div1') : $('#div2');
  let itemHtml = `<div class="data-item">
                    <h4>${item.title}</h4>
                    ${item.author ? `<p>作者：${item.author}</p>` : ''}
                    ${item.platform ? `<p>平台：${item.platform}</p>` : ''}
                  </div>`;
  target.append(itemHtml);
});

3. 点击「Run」就能看到效果，还可以在CSS面板添加样式美化展示效果

内容的提问来源于stack exchange，提问作者Rajadurai M