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

将所有价格保存到数组后，迭代数组并使用unary plus将其转换为数字：

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');

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

2 个答案: