为商店产品创建按高/低价格列表排序？答案

【问题标题】：Creating Sort by high/low price list for store products?为商店产品创建按高/低价格列表排序？
【发布时间】：2016-04-01 21:14:17
【问题描述】：

这是我的 HTML 示例，但明显缩短了：

<h2 class="price">$881.99</h2>
<h2 class="price">$715.05</h2>
<h2 class="price">$651.95</h2>
<h2 class="price">$921.10</h2>

感谢这里的一位用户帮助我，我的 JavaScript 删除了 $ 并对价格进行排序，然后记录到控制台，如您所见。

function myFunction() {
    return Array.prototype.slice.call(document.getElementsByClassName("price"))
        .map(function(el){
            return Number(el.innerHTML.replace(/\$/, ""));
        })
        .sort();
}

console.log(myFunction());

问题是，当我使用 Fiddle 时它可以正常工作，但当我尝试将它实现到我的实际网站时，数组是空的。

所以基本上我想知道如何将排序后的项目实际输出到屏幕上，以及如何在myFunction 中反转排序顺序？

【问题讨论】：

你可能在 DOM 准备好之前调用你的函数。

标签： javascript html arrays sorting

【解决方案1】：

此方法用于反转数组。

<body>
<h2 class="price">$881.99</h2>
<h2 class="price">$715.05</h2>
<h2 class="price">$651.95</h2>
<h2 class="price">$921.10</h2>

<script>
function myFunction() {
    var temp;
     temp = Array.prototype.slice.call(document.getElementsByClassName("price"))
        .map(function(el)
        {
            temp = Number(el.innerHTML.replace(/\$/, ""));
            return temp;
        })
        .sort();
    return temp.reverse();
}
console.log(myFunction());  
</script>

</body>

【讨论】：

【解决方案2】：

简单的方法，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h2 class="price">$881.99</h2>
    <h2 class="price">$715.05</h2>
    <h2 class="price">$651.95</h2>
    <h2 class="price">$921.10</h2>
    <script>
        var array = Array.slice(document.getElementsByClassName("price"));
        array.sort(function (a, b) {            
            return parseFloat(a.innerHTML.replace("$", "")) - parseFloat(b.innerHTML.replace("$", ""));
        });
        array.map(function(e){
           e.parentNode.appendChild(e); 
        });
    </script>
</body>
</html>

【讨论】：

【解决方案3】：

下面是一个工作示例。您可以通过传递一个函数作为.sort() 的第一个参数来反转排序顺序，该参数告诉JavaScript 哪个项目在前。在这里，我在该函数的return 语句中交换了a 和b，这颠倒了排序顺序。然后，使用一个简单的循环，我以新的顺序将元素附加回它们的父元素。

您缺少的是最后一部分，您没有将已排序的元素添加回文档中，它们在排序完成后留在内存中并且没有发生任何事情。

function myFunction(){
  var elements = [].slice.call(document.getElementsByClassName("price"));
  elements.sort(function(a,b){
    return parseFloat(b.innerHTML.substring(1)) - parseFloat(a.innerHTML.substring(1));
  });
  for (var i=0; i<elements.length; i++)
    elements[i].parentNode.appendChild(elements[i]);
}

myFunction();

<h2 class="price">$881.99</h2>
<h2 class="price">$715.05</h2>
<h2 class="price">$651.95</h2>
<h2 class="price">$921.10</h2>

【讨论】：