如何用JavaScript/jQuery实现文本按指定顺序移入网格单元格？

• 完全可以用JavaScript或jQuery轻松实现这个功能，是否给目标方格加id取决于你的开发习惯，两种方案都可行：

方案一：给目标方格添加id（逻辑最直接） #

给每个目标方格的div加上对应id（比如h1-grid、h2-grid…g6-grid），同时给左侧蓝色文本容器加上data-target属性（比如data-target="H1"）来关联对应目标。

JavaScript原生实现代码： #

document.querySelector('#move-btn').addEventListener('click', function() {
  const rows = ['H', 'G'];
  rows.forEach(row => {
    for(let i = 1; i <= 6; i++) {
      const targetId = `${row.toLowerCase()}${i}-grid`;
      const sourceText = document.querySelector(`.blue-text[data-target="${row}${i}"]`).textContent.trim();
      document.getElementById(targetId).textContent = sourceText;
    }
  });
});

jQuery实现代码： #

$('#move-btn').on('click', function() {
  const rows = ['H', 'G'];
  $.each(rows, function(_, row) {
    for(let i = 1; i <= 6; i++) {
      const sourceText = $(`.blue-text[data-target="${row}${i}"]`).text().trim();
      $(`#${row.toLowerCase()}${i}-grid`).text(sourceText);
    }
  });
});

方案二：无需添加id，利用文本标识匹配 #

如果不想额外加id，可以利用目标方格内的默认标识文本（比如方格内原本显示H1、H2），通过文本内容匹配对应的蓝色文本。

JavaScript原生实现代码： #

document.querySelector('#move-btn').addEventListener('click', function() {
  const rows = ['H', 'G'];
  rows.forEach(row => {
    for(let i = 1; i <= 6; i++) {
      const targetLabel = `${row}${i}`;
      // 找到对应目标方格
      const targetGrid = [...document.querySelectorAll('.grid-cell')].find(cell => cell.textContent.trim() === targetLabel);
      // 找到对应蓝色文本
      const sourceText = [...document.querySelectorAll('.blue-text')].find(el => el.textContent.includes(`${targetLabel} Text`)).textContent.trim();
      targetGrid.textContent = sourceText;
    }
  });
});

jQuery实现代码（更简洁）： #

$('#move-btn').on('click', function() {
  const rows = ['H', 'G'];
  $.each(rows, function(_, row) {
    for(let i = 1; i <= 6; i++) {
      const targetLabel = `${row}${i}`;
      const sourceText = $(`.blue-text:contains("${targetLabel} Text")`).text().trim();
      $(`.grid-cell:contains("${targetLabel}")`).text(sourceText);
    }
  });
});

• 实际文本长度8-10字符完全不影响功能，代码仅读取文本内容进行赋值，和长度无关。

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