在JavaScript中匹配JSON属性值与HTML data-docid属性及代码修复

核心问题：选择器中变量未正确解析 #

你代码里的$("#candidateDetails tbody td a:eq(index)")存在语法错误——这里的index是循环中的变量，但直接写在字符串选择器里会被jQuery当成字面量字符串"index"，而不是循环对应的数值索引，所以jQuery找不到对应的元素，自然返回undefined。

另外还有一个潜在风险：你假设data数组的索引顺序和页面中a标签的顺序完全一致，但如果后端返回的data顺序和页面元素顺序不匹配，按索引匹配的逻辑就会失效，这种写法不够健壮。

修改方案 #

方案1：修复索引解析问题（保持按索引匹配逻辑）

把选择器里的index变量用模板字符串或者字符串拼接的方式插入，让jQuery能识别正确的索引：

$.ajax({
  type: "GET",
  url: docuViewURL,
  success: function(data) {
    $.each(data, function(index, value) {
      console.log(index);
      // 用模板字符串插入index变量
      var a = $(`#candidateDetails tbody td a:eq(${index})`).attr("data-docid");
      var b = value.DocID;
      if (a === b) {
        // 找到对应td，插入DocSubType
        $(`#candidateDetails tbody td a:eq(${index})`).closest("td").text(value.DocSubType);
      }
    });
  }
});

方案2：更健壮的匹配方式（按data-docid直接查找）

放弃按索引匹配，直接通过data-docid属性值查找对应的元素，这样不管data的顺序如何，只要DocID匹配就能找到目标元素，逻辑更可靠：

$.ajax({
  type: "GET",
  url: docuViewURL,
  success: function(data) {
    $.each(data, function(index, value) {
      // 直接查找data-docid等于当前DocID的a标签
      var targetLink = $(`#candidateDetails tbody td a[data-docid="${value.DocID}"]`);
      if (targetLink.length > 0) {
        // 找到对应的td，插入DocSubType
        targetLink.closest("td").text(value.DocSubType);
      }
    });
  }
});

补充说明 #

• 如果你的需求是在td里追加内容而不是覆盖原有内容，可以把.text()换成.append()。
• 建议用===严格相等判断代替==，避免隐式类型转换带来的意外问题。

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