Question

这是我的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());

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

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

Answer 1

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

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

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>

Answer 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>

Answer 3

此方法用于反转数组。

<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>

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

3 个答案: