使用支持IE11的vanilla JavaScript按价格对UL进行排序。

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) "截取，然后将每个项目推送到一个数组。然后对数组进行排序，并替换每个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>