Question

我正在使用像这样的循环检查表单元格：

for (var h = i - 1; h < i + 2; h++) {
  for (var w = j - 1; w < j + 2; w++) {
    cell = document.getElementById('cell-' + (h).toString() + '-' + (w).toString());
    console.log(cell.classList);
  }
}

我得到 TypeError：单元格为空

但是当我使用数字而不是变量通过其ID获取元素时，它可以正常工作。例如：

for (var h = i - 1; h < i + 2; h++) {
  for (var w = j - 1; w < j + 2; w++) {
    cell = document.getElementById('cell-' + (1).toString() + '-' + (1).toString());
    console.log(cell.classList);
  }
}

这部分代码有什么问题？如何使用循环遍历单元格？

Answer 1

尝试在计算中使用字符串文字。完全不需要使用toString()。

function getCell(){
for(i=0;i <5; i++){
  var  cell = document.getElementById(`cell-${i}`);
  console.log(cell)
}
}

<div id="cell-0"></div>
<div id="cell-1"></div>
<div id="cell-2"></div>
<div id="cell-3"></div>
<div id="cell-4"></div>

<button onclick="getCell()">Click Me</button>

Answer 2

我喜欢其他解决方案，但是如果您正在从事函数式编程，则可能会或可能不会喜欢使用与此类似的方法。我知道已经有一个有效的答案，但是有了我的解决方案，它就可以正常工作了。

我的意思是，我不是要就您是否应该在程序上使用函数式编程或其他方法进行辩论，我只是在提供一种替代解决方案。

/*
window.getCells = () => {
  // Get a HTMLCollection. 
  const cellCollection = document.querySelectorAll("[id*=cell]"); 

  // Convert to array so we can use map.
  const cellArray = Array.prototype.slice.call(cellCollection);

  // Now print each item.
  cellArray.map(i => console.log(i));  
};
*/

// Pretty much a one liner, used a return character to make it slightly more readable. 
window.getCells = () => Array.prototype.slice
  .call(document.querySelectorAll("[id*=cell]"))
  .map(i => console.log(i));

<div id="cell-0"></div>
<div id="cell-1"></div>
<div id="cell-2"></div>
<div id="cell-3"></div>
<div id="cell-4"></div>

<button onclick="getCells()">Click Me</button>

循环中的getElementById无法正常工作

2 个答案: