在电子商务网站上按商品价格对商品进行排序？

Question

我正在尝试使用Javascript的getAttribute来获取商品价格。我是个大菜鸟，所以我只使用了 getAttribute 并将

<h2>

类更改为商品价格。不过，这只获取第一个商品的价格，我怎样才能让它获取所有价格并将它们存储为数组以进行排序或其他内容？

这是我的一些 HTML：

<div class="col-sm-4">
  <div class="product-image-wrapper">
    <div class="single-products">
      <div class="productinfo text-center">
        <img src="images\site_images\bag3.jpg" alt="" height="249" />
        <h2 class="881.10">$881.10</h2>
        <h5>Authentic New Gucci ($1690) Micro-GG "Vernice" Crossbody w/Strap #309617, NWT</h5>
        <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
      </div>
      <div class="col-sm-4">
        <div class="product-image-wrapper">
          <div class="single-products">
            <div class="productinfo text-center">
              <img src="images\site_images\bag4.jpg" alt="" height="249" />
              <h2 class="569.05">$569.05</h2>
              <h5>AUTHENTIC NWT ($819) Gucci GG Large Brown Denim Tassell Tote #336660, w/Gft Rcpt</h5>
              <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
            </div>

            <div class="col-sm-4">
              <div class="product-image-wrapper">
                <div class="single-products">
                  <div class="productinfo text-center">
                    <img src="images\site_images\bag5.jpg" alt="" height="249" />
                    <h2 class="559.00">$559.00</h2>
                    <h5>Authentic Gucci GG Micro-Guccissima Leather Tote #309613 w/Gft Rcpt,NWT</h5>
                    <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
                  </div>

和

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

这是我用来获取商品价格的 Javascript 代码：

function myFunction() {
  var x = document.getElementsByTagName("H2")[0].getAttribute("class");
  document.getElementById("demo").innerHTML = x;
}

如您所见，我是一个巨大的新手，所以请尽量让您的答案不要那么复杂。 :) 谢谢！

Answer 1

将价格保存到数组中，然后使用

.sort()

对数组进行排序。请注意，

.sort()

函数默认按字母顺序排序，因此您必须为整数编写自己的比较器函数。例如，按升序排序：

function sortNumber(a,b) {
    return a - b;
}

将所有价格保存到数组后，迭代该数组并使用一元加号将它们转换为数字：

var items = document.getElementsByTagName("H2");
var prices = [];

for(var i = 0; i < items.length; i++){
    prices.push( +items[i].getAttribute("class"));
}

或者，您可以使用

.parseInt()

。

请参阅此处的示例：http://codepen.io/anon/pen/VeKyMe

Answer 2

为什么首先要将价格值存储为类属性？这样做就违背了 class 属性的主要目的，即对共享共同点的元素进行分组。

我建议对所有包含价格的标签使用相同的类属性值，例如：

...
<h2 class="price">$111.11</h2>
...
<h2 class="price">$222.22</h2>
...

然后，您可以在一次调用中获取属于同一类的所有元素，并迭代它们：

javascript: 
var items = getElementsByClassName('price')

jQuery:
var items = $('.price')

如果出于任何原因，将值存储在某些属性中对您来说很重要，您可以使用自定义

data-

属性，例如：

<h2 class="price" data-value="111.11">$111.11</h2>

稍后可以访问：

javascript:
<element>.getAttribute('data-value')

jQuery: 
<element>.data('value');