JavaScript循环实现获取各列最后一个DIV的问题求助

嘿，我来帮你梳理下问题所在，其实核心错误很明显——你定义的col数组只是数字0到6的列表，并不是实际对应页面上那7列的DOM元素集合！所以不管你用for还是forEach循环，每次拿到的col[col.length-1]都是这个数字数组的最后一项6，自然获取不到每列的最后一个DIV啦。

正确的步骤拆解 #

首先你需要先拿到页面上那7列的实际DOM元素，然后再遍历每一列去获取它的最后一个子DIV。

第一步：获取所有列的DOM元素 #

假设你的列是通过类名.col定义的（比如每列的HTML是<div class="col">...</div>），可以用querySelectorAll一次性获取所有列：

// 获取页面上所有class为col的元素，返回一个类数组对象
const cols = document.querySelectorAll('.col');

如果你的列是用ID区分的（比如id="col0"、id="col1"...id="col6"），可以用循环生成元素数组：

// 生成包含7列DOM元素的数组
const cols = Array.from({ length: 7 }, (_, index) => {
  return document.getElementById(`col${index}`);
});

第二步：遍历每一列，获取最后一个DIV #

现在有了实际的列元素数组，就可以用循环处理每一列了：

方法1：for循环（你最开始尝试的方式）

function getLastDivs() {
  const cols = document.querySelectorAll('.col');
  // 遍历每一列
  for (let i = 0; i < cols.length; i++) {
    // 当前列的DOM元素
    const currentCol = cols[i];
    // 获取当前列的最后一个DIV子元素
    const lastDiv = currentCol.querySelector('div:last-child');
    // 或者用children集合：currentCol.children[currentCol.children.length - 1]
    console.log(`第${i}列的最后一个DIV:`, lastDiv);
  }
}

方法2：forEach循环

const cols = document.querySelectorAll('.col');
cols.forEach((col, index) => {
  const lastDiv = col.querySelector('div:last-child');
  console.log(`第${index}列的最后一个DIV:`, lastDiv);
});

方法3：for...of循环（其实一点都不复杂！）

const cols = document.querySelectorAll('.col');
let index = 0;
for (const col of cols) {
  const lastDiv = col.querySelector('div:last-child');
  console.log(`第${index}列的最后一个DIV:`, lastDiv);
  index++;
}

额外说明 #

• 用querySelector('div:last-child')可以直接选中列里的最后一个DIV子元素，比用children[length-1]更简洁，不过两者都能用。
• 如果你之前的cols变量已经是实际的列元素集合（比如你之前重复写的cols[1]是DOM元素），那只需要把循环里的col换成cols[i]，并去掉你错误定义的数字数组即可。

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