Сортировать UL по цене с ванилью JavaScript с поддержкой IE11

Question

Очень просто. Я пытаюсь отсортировать неупорядоченный список по цене, используя только vanilla JS, и для этого требуется поддержка IE 11.
Я получаю сообщение об ошибке document.querySelector(...).innerHTML, а также не уверен, поддерживается ли Array.prototype.slice в IE11, несмотря на проверку https://caniuse.com/
Вот что я сделал:

function sort(){
  var productsContainer = document.querySelector('.products-grid');
  var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
  console.log("els" + els)
   els.sort(function(a, b) {
    na = parseInt(a.querySelector('.price-item--regular > span').innerHTML);
    nb = parseInt(b.querySelector('.price-item--regular > span').innerHTML);
    document.querySelector(".products-grid").innerHTML((nb - na));
  });
}

<button onclick="sort()"> sort</button>
<ul class="products-grid">
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£2.96</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
    <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
</ul>

Answer 1

Этот фрагмент принимает каждый элемент и отсекает символ валюты с помощью «substring (1)», а затем помещает каждый элемент в массив. Затем он сортирует массив и заменяет каждый внутренний атрибут HTML. Надеюсь, это поможет!

function sort() {
  var productsContainer = document.querySelector('.products-grid');
  var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
  var unsorted = [];
  for (var i = 0; i < els.length; i++) {
    unsorted.push(els[i].querySelector('.price-item--regular > span').innerHTML.substring(1));
  }
  var sorted = unsorted.sort(function(a, b) {
    return a - b
  });
  for (var i = 0; i < els.length; i++) {
    els[i].querySelector('.price-item--regular > span').innerHTML = "£" + sorted[i];
  }
}

<button onclick="sort()"> sort</button>
<ul class="products-grid">
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£111.96</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£10.10</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£8.31</span>
    </div>
  </li>
</ul>

Используя JQuery, этот метод намного чище:

function sort() {
  var productsContainer = document.querySelector('.products-grid');
  var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
  els.sort(function(a, b) {
    return a.querySelector('.price-item--regular > span').innerHTML.substring(1) - b.querySelector('.price-item--regular > span').innerHTML.substring(1);
  });
  $(productsContainer).append(els).html(); // THIS IS JQUERY
}

<button onclick="sort()"> sort</button>
<ul class="products-grid">
  <li class="product">
    <img src="" alt="a">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£111.96</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="b">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£10.10</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="c">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="d">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£8.31</span>
    </div>
  </li>
</ul>