按商品價格對電子商務網站上的商品排序？

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屬性的主要目的，即將具有共同點的元素分組。

我建議對包含價格的所有標簽的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');