使用jQuery遍历JSON时，匹配id为status的div文本仅获首个内容的问题求助

嘿，这个坑我踩过好几次！你遇到的问题核心原因很简单：HTML规范里明确要求id属性必须是唯一的——不管是浏览器原生的getElementById还是jQuery的$("#status")，都会默认只返回第一个匹配该id的元素，所以你每次只能拿到第一个div的内容，根本没机会接触到后面的那些。

下面给你两种解决思路，优先推荐第一种（符合规范）：

1. 规范写法：把id改成class（推荐） #

首先修改你的HTML，把所有id="status"替换成class="status"，因为class就是用来标识一组同类型元素的，完全符合设计初衷：

<!-- 原来的错误写法 -->
<div id="status">状态1</div>
<div id="status">状态2</div>

<!-- 修改后的正确写法 -->
<div class="status">状态1</div>
<div class="status">状态2</div>

然后在你的jQuery代码里，先缓存所有状态div（避免每次遍历都重复查询DOM，提升性能），再在JSON遍历里逐个比对：

// 先获取所有状态div并缓存
const $statusDivs = $(".status");

// 遍历你的已解析JSON数据
$.each(yourParsedJsonData, function(jsonIndex, jsonItem) {
  // 遍历每个状态div，做内容比对
  $statusDivs.each(function(divIndex) {
    // 记得用trim()去掉前后空格，避免因为空格导致比对失败
    const divText = $(this).text().trim();
    // 替换成你JSON里需要比对的字段
    const jsonValue = jsonItem.statusContent.trim();

    if (divText === jsonValue) {
      // 这里写匹配成功后的逻辑，比如高亮、修改内容等
      $(this).css("color", "green").text(`匹配成功：${jsonValue}`);
      console.log(`第${divIndex+1}个div匹配到JSON项：${jsonIndex+1}`);
    }
  });
});

2. 临时hack：用属性选择器（不推荐） #

如果因为某些特殊原因你没办法修改HTML的id（比如老项目遗留问题），可以用jQuery的属性选择器来强制获取所有id为status的元素，但这是违反HTML规范的写法，可能会带来其他潜在问题（比如JS或CSS的意外冲突），谨慎使用：

// 用属性选择器获取所有id="status"的元素
const $statusDivs = $("[id='status']");

// 后续的遍历和比对逻辑和上面完全一样
$.each(yourParsedJsonData, function(jsonIndex, jsonItem) {
  $statusDivs.each(function(divIndex) {
    const divText = $(this).text().trim();
    const jsonValue = jsonItem.statusContent.trim();

    if (divText === jsonValue) {
      // 匹配逻辑
    }
  });
});

最后提醒下：尽量遵守HTML规范，id唯一是基础要求，不然以后维护代码的时候会给自己挖很多坑哦～

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