Почему this.field.sort в консоль сортирует а в DOM нет?

165

06 июня 2019, 01:20

class Game {
  constructor(parentElement, sizeX, sizeY) {
    this.field = [];
    let num = 0;
    for (let i = 0; i < sizeX; i++) {
      this.field[i] = [];
      for (let k = 0; k < sizeY; k++) {
        if (k % 2 !== 0) {
          this.field[i][k] = new Cell(this.fielElement, num)
          num++
        } else
          this.field[i][k] = new Cell(this.fielElement, num)
      }
    };
    this.field.sort(this.createRandom); // ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
    console.log(this.field)
  }
  createRandom() {
    return Math.random() - 0.5;
  }
}

Ребят, подскажите, почему this.field.sort в консоль сортирует, а в DOM нет????

Answer 1

Сортировка элементов в JS массиве не влияет на их положение в DOM структуре. Вам необходимо выполнять манипуляции напрямую с DOM деревом. Для уменьшения затрат лучше в начале создать массив элементов, отсортировать, а затем добавить в DOM. Например:

var parentDiv = document.getElementById("parent"); 
var elements = []; 
 
//Create samples 
for(var i = 0; i < 10; i++) { 
  var newDiv = document.createElement('div'); 
  newDiv.innerHTML = Math.random(); 
  elements.push(newDiv) 
} 
 
//Sort elements 
elements.sort(function(a, b) { 
  return a.innerHTML > b.innerHTML ? 1 : -1; 
}) 
 
//Insert into parent 
for(var i = 0; i < elements.length; i++) { 
  parentDiv.appendChild(elements[i]) 
}