mcmwhfy mcmwhfy - 4 months ago 10
CSS Question

iterating through elements on the same row

I have create a custom table with div and span and on this table I want to add values from an array itterating trough all span cells but I don't really know how to do that.

<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>


So I have this array:

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


and I want to write all its values from 1 to 3 on span cells

var sel = document.querySelectorAll(.cell);


eventually matching position from array with a position from row cell.

Answer

You can get elements by class name using getElementsByClassName() method and iterate over them with help of Array.from() and Array#forEach methods. Where Array.from() helps to convert Nodelist to array and Array#forEach helps to iterate over them.

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>


FYI : Array.from() method is introduced in ES6 so use [].slice.apply() for older browser and also check polyfill option for Array#forEach method.


UPDATE : For adding element randomly from array generate index using Math.random() and update.

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>