如何使用jQuery的.each方法通过另一元素属性为表格设置ID

你的思路方向是对的，但问题出在选择器的范围上——原代码里每次循环都选中了页面上所有的<table>元素，导致最后所有表格的ID都会被覆盖成最后一个caption的name值，而不是对应各自的表格。

修正方案 #

核心是找到当前<caption>所属的那一个<table>，而不是全局所有表格。可以用.closest('table')方法来定位最近的父级表格（这个方法比.parent()更稳妥，哪怕caption外面嵌套了其他元素也能准确找到表格）：

$('caption').each(function() {
  // 获取当前caption的name属性值
  const tableId = $(this).attr('name');
  // 找到当前caption对应的表格，设置它的ID
  $(this).closest('table').attr('id', tableId);
});

额外优化（可选） #

如果页面上存在没有name属性的caption，可以加个判断，避免给表格设置空ID：

$('caption').each(function() {
  const tableId = $(this).attr('name');
  // 只有当name属性存在且有值时才设置ID
  if (tableId) {
    $(this).closest('table').attr('id', tableId);
  }
});

这样就能实现每个表格的ID和自身caption的name属性一一对应啦！

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