在支持 IE11 的情况下，使用 vanilla JavaScript 按价格对 UL 进行排序

Question

非常简单我正在尝试仅使用 vanilla JS 按价格对无序列表进行排序，它需要 IE 11 支持。
我收到 document.querySelector(...).innerHTML 错误，并且尽管检查 https://caniuse.com/ 也不确定 IE11 是否支持 Array.prototype.slice
这是我所做的：

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)" 获取每个项目和货币符号的片段，然后将每个项目推送到一个数组。然后它对数组进行排序并替换每个 innerHTML 属性。希望这对您有所帮助！

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>

在支持 IE11 的情况下，使用 vanilla JavaScript 按价格对 UL 进行排序

Sort UL by price with vanilla JavaScript with IE11 support

html

javascript

ecmascript-5