Sort items on e-commerce site by item price?

Question

I'm trying to use Javascript's getAttribute to get the item price. I'm a huge noob so I just used getAttribute and changed the <h2> classes to the item prices. That only grabs the first item price though, how can I get it to grab all of the prices and store them as an array for sorting or something?

Here's some of my 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>

and

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

And here is my Javascript code I'm using to get the item prices:

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

I'm a huge novice as you can see, so please try to make your answers not so complex if you could. :) thanks!

Answer 1

Save the prices to an array, and then use .sort() to sort the array. Note that the .sort() function sorts alphabetically by default, so you have to write your own comparator function for integers. for example, to sort in ascending order:

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

Once you have all the prices saved to an array, iterate through the array and convert them to numbers using a unary plus :

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

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

Alternatively, you can use .parseInt() .

see an example here: http://codepen.io/anon/pen/VeKyMe

Answer 2

Why would you store the value of the prices as a class attribute in the first place? By doing so, you are going against the main purpose of the class attribute, which is to group elements that share something in common.

I'd suggest using the same value for the class attribute for all the tags that contain a price, for example:

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

Then you can grab all the elements that belong to the same class, in one call, and iterate over them:

javascript: 
var items = getElementsByClassName('price')

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

If for any reason it is important to you to store the value in some attribute, you could use the custom data- attributes, for example:

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

which could be accessed later:

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

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