如何用JavaScript按网格顺序获取动态添加的CSS Grid子项并检查位置

你说得对，目前并没有原生的API可以直接返回CSS Grid容器中按网格布局顺序排列的子元素数组——MDN上确实找不到这类方法。不过我们可以通过两种思路来解决你的需求：手动遍历子元素并按网格位置排序，或者在动态操作元素时维护一个位置映射表。

方案一：手动遍历并按网格位置排序 #

这种方法适合不想额外维护数据结构的场景，核心是通过getComputedStyle获取每个子元素实际的网格行和列位置，再按行优先（或列优先）的顺序排序。

实现步骤： #

• 获取Grid容器的所有子元素
• 对每个子元素，通过getComputedStyle解析其grid-row-start和grid-column-start的值（这是Grid布局中决定元素位置的核心属性）
• 按行号升序，列号升序的规则排序子元素，得到按网格顺序排列的数组
• 如果需要二维数组，可以进一步按行号分组

示例代码： #

function getGridOrderedElements(container) {
  const children = Array.from(container.children);
  
  return children.sort((a, b) => {
    // 获取元素实际的网格位置
    const aStyle = getComputedStyle(a);
    const bStyle = getComputedStyle(b);
    
    // 解析行和列的起始值（默认是1）
    const aRow = parseInt(aStyle.gridRowStart) || 1;
    const aCol = parseInt(aStyle.gridColumnStart) || 1;
    const bRow = parseInt(bStyle.gridRowStart) || 1;
    const bCol = parseInt(bStyle.gridColumnStart) || 1;
    
    // 先按行排序，行相同再按列排序
    if (aRow !== bRow) {
      return aRow - bRow;
    }
    return aCol - bCol;
  });
}

// 转换为二维数组（按行分组）
function getGridAs2DArray(container) {
  const ordered = getGridOrderedElements(container);
  const gridMap = new Map();
  
  ordered.forEach(el => {
    const style = getComputedStyle(el);
    const row = parseInt(style.gridRowStart) || 1;
    if (!gridMap.has(row)) {
      gridMap.set(row, []);
    }
    gridMap.get(row).push(el);
  });
  
  // 按行号升序返回二维数组
  return Array.from(gridMap.values());
}

// 使用示例
const container = document.querySelector('.wrapper');
const orderedElements = getGridOrderedElements(container);
const grid2D = getGridAs2DArray(container);

方案二：维护位置映射表（更高效） #

如果你的网格操作比较频繁（频繁添加/移除/更新元素），手动遍历排序的效率会越来越低。这时可以在动态操作元素时，自己维护一个记录网格位置与元素对应关系的数据结构，比如对象或Map。

实现步骤： #

• 初始化一个映射表（比如gridPositionMap，键为行号-列号的字符串，值为对应元素）
• 添加元素时，将元素的网格行和列信息存入映射表
• 检查某个位置是否有元素时，直接通过映射表查询
• 移除元素时，同时从映射表中删除对应记录

示例代码： #

// 全局或模块级别的映射表，记录网格位置与元素的对应关系
const gridPositionMap = new Map();

function addGridElement(container, row, col, content) {
  // 先检查位置是否已被占用
  const key = `${row}-${col}`;
  if (gridPositionMap.has(key)) {
    // 移除已存在的元素
    const existingEl = gridPositionMap.get(key);
    container.removeChild(existingEl);
    gridPositionMap.delete(key);
  }
  
  // 创建新元素
  const el = document.createElement('div');
  el.className = 'box';
  el.style.gridRow = row;
  el.style.gridColumn = col;
  el.textContent = content;
  
  // 添加到容器和映射表
  container.appendChild(el);
  gridPositionMap.set(key, el);
  
  return el;
}

// 检查位置是否有元素
function hasElementAtPosition(row, col) {
  return gridPositionMap.has(`${row}-${col}`);
}

// 获取指定位置的元素
function getElementAtPosition(row, col) {
  return gridPositionMap.get(`${row}-${col}`) || null;
}

// 修改你的run函数来使用这个方法
function run() {
  const con = document.querySelector('.wrapper');
  for(let i=1; i<10; i++){
    addGridElement(con, i, i, i);
  }
  
  // 示例：检查并更新(3,3)位置的元素
  if (hasElementAtPosition(3,3)) {
    const el = getElementAtPosition(3,3);
    el.style.backgroundColor = '#ff6b6b';
  }
}

注意事项 #

• 用getComputedStyle而不是直接读element.style.gridColumn：前者能获取到所有来源的样式（包括CSS类、内联样式等），后者只能读取内联设置的样式，可靠性更低。
• 如果你的Grid元素有跨多行/多列的情况，需要根据你的需求调整排序逻辑（比如按元素的左上角位置排序）。

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