javascript - 遍历同一行的元素

Question

我创建了一个带有 div 和 span 的自定义表，我想在这个表上添加一个数组中的值，该数组遍历所有 span 单元格，但我真的不知道该怎么做。

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>

  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>

所以我有这个数组:

var arry = [];
for (var i = 1; i <= 3; i++) {
   arry.push(i);
}

我想把它的所有值从 1 到 3 写在跨度单元格上

var sel = document.querySelectorAll(.cell);

最终将数组中的位置与行单元格中的位置进行匹配。

Answer 1

您可以使用 getElementsByClassName() 按类名获取元素 方法并在 Array.from() 的帮助下迭代它们 和 Array#forEach 方法。哪里 Array.from() 有助于将 Nodelist 转换为数组和 Array#forEach 有助于迭代它们。

var arr = [1, 2, 3, 4];

Array.from(document.getElementsByClassName('row')).forEach(function(ele) {
  Array.from(ele.getElementsByClassName('cell')).forEach(function(e, i) {
    e.textContent = arr[i];
  });
})

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>

---

仅供引用: Array.from() 方法是在 ES6 中引入的，所以使用 [].slice.apply()对于较旧的浏览器，还要检查 polyfill option for Array#forEach method .

---

更新: 使用 Math.random() 从数组中随机添加元素生成索引 和更新。

var arr = [1, 2, 3];

Array.from(document.getElementsByClassName('cell')).forEach(function(e, i) {
  // generate index value within `0` and `arr.length - 1` and get element
  e.textContent = arr[Math.round(Math.random()*(arr.length-1))];
});

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>