首页 > 解决方案 > 使用支持 IE11 的 vanilla JavaScript 按价格对 UL 进行排序

问题描述

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

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>

标签: javascripthtmlecmascript-5

解决方案


此代码段使用“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>


推荐阅读