javascript - 使用支持 IE11 的 vanilla JavaScript 按价格对 UL 进行排序
问题描述
非常简单我试图仅使用 vanilla JS 按价格对无序列表进行排序,并且它需要 IE 11 支持。尽管检查了https://caniuse.com/
,但我收到了一个错误,document.querySelector(...).innerHTML
也不确定Array.prototype.slice
IE11 是否支持这是我所做的:
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>
解决方案
此代码段使用“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>
推荐阅读
- r - R中Boruta中箱线图的颜色是否取决于另一个包?
- javascript - 如何在 TypeScript 项目的 JSON 类中覆盖 JSON.stringify 方法,而不是在自定义调用中?
- css - CSS Grid gutter 导致列溢出,如何强制列宽符合
- swift - 将 TensorFlow 导入 Xcode:活动工具链与 Playground 不兼容
- javascript - 在不同离子幻灯片中加载的不同 iframe 中的滑动功能
- javascript - 无法让输入验证 Javascript 工作
- javascript - 在 React 中隐藏 HTML 元素
- javascript - 为什么承诺会在未返回的价值上转到其他承诺
- perforce - 在 p4v 中,如何列出某个文件夹的“已签出”“不同步”文件?
- python - 如何在 Mac 上运行 python 文件,但让它运行它的人看不到代码