jQuery循环匹配数组ID与DOM的data-tuple-id追加phoneno值方法

直接上完整可运行的实现：

// 原始联系人数据数组
const contactList = [
  {
    "id": "41796005",
    "name": " Manoj ",
    "phoneno": " xyz",
    "email": "xyz@gmail.com"
  },
  {
    "id": "160865953",
    "name": " Manisha Sajnani ",
    "phoneno": "xyz",
    "email": "xyz@gmail.com"
  }
];

// 预构建id为键的映射表，提升匹配查找效率
const contactMap = {};
contactList.forEach(contact => {
  contactMap[contact.id] = contact;
});

// DOM加载完成后执行逻辑
$(document).ready(function() {
  // 遍历所有携带data-tuple-id的tuple类div
  $('div.tuple[data-tuple-id]').each(function() {
    const $tuple = $(this);
    const tupleId = $tuple.data('tuple-id');
    // 匹配对应联系人
    const targetContact = contactMap[tupleId];
    if (targetContact) {
      // 直接追加纯文本手机号
      $tuple.append(targetContact.phoneno);
      // 如果需要加样式可以用下面的写法，同时自动清理字段前后空格
      // $tuple.append(`<span class="tuple-phone">${targetContact.phoneno.trim()}</span>`);
    }
  });
});

实现说明 #

• 提前把数组转成id为键的映射对象，避免每次遍历div都要循环整个数组做匹配，当前40个元素的场景下感知不强，但后续数据量增大后效率提升非常明显。
• 选择器div.tuple[data-tuple-id]会精准筛选目标div，不会误选其他不带该自定义属性的同class元素。
• 用jQuery的.data('tuple-id')读取自定义属性是官方推荐写法，不需要手动调用attr()取值。
• 示例数据里name、phoneno字段前后带多余空格，如果需要清理，取值时调用.trim()方法即可。

注意：代码必须放在DOM加载完成的回调里执行，否则如果脚本在页面元素渲染前运行，会找不到目标div导致逻辑失效。

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