Сортировка интервалов путем вычисления значений интервалов в дочерних элементах

Question

У меня есть такой код, который генерируется с помощью коротких кодов на WordPress (заполняется имя, цены и т. Д.)

<div class="productgrid">
<span class="product">
    <span class="prodname">Product 1</span>
    <a href="#/">
        <span class="prodprices">
            <span class="prodcost">90.00</span>
            +
            <span class="prodfee">10.00</span>
        </span>
    </a>
</span>
    <span class="product">
    <span class="prodname">Product 2</span>
    <a href="#/">
        <span class="prodprices">
            <span class="prodcost">20.00</span>
            +
            <span class="prodfee">5.00</span>
        </span>
    </a>
</span>
    <span class="product">
    <span class="prodname">Product 3</span>
    <a href="#/">
        <span class="prodprices">
            <span class="prodcost">30.00</span>
            +
            <span class="prodfee">10.00</span>
        </span>
    </a>
</span>
</div>

Который будет выглядеть как

Product 1 90.00 + 10.00 

Product 2 20.00 + 5.00 

Product 3 30.00 + 10.00

Я могу 't добавить любые атрибуты в промежутки из-за того, как WordPress работает с шорткодами.

Мне нужно Сортировать товары по наименьшей по наибольшей общей цене, поэтому сумма обоих пролетов в каждом

Product 2 20.00 + 5.00 

Product 3 30.00 + 10.00 

Product 1 90.00 + 10.00

И я знаю, что в этом примере это будет просто prodcost, но prodfee не всегда будет таким маленьким, поэтому общая стоимость - это то, что мне нужносортировать по.

Answer 1

Сделайте это:

document.getElementById( 'sort' ).addEventListener( 'click', function() {
  var els = document.querySelectorAll( '.product' );

  for ( var i = 0, val = []; i < els.length; i++ ) {
    val[ i ] = { index: i, value: Number( document.querySelectorAll( '.prodcost' )[ i ].innerText ) + Number( document.querySelectorAll( '.prodfee' )[ i ].innerText ) };
  }

  val.sort( function( a, b ) {
    return a.value > b.value ? 1 : a.value == b.value ? 0 : -1
  } )

  for ( var i = 0, str = ''; i < val.length; i++ ) {
    str += '<div class="product">' + els[ val[ i ].index ].innerHTML + '</div>'
  }

  document.querySelector( '.productgrid' ).innerHTML = str
} )

<input id="sort" type="button" value="Sort">

<div class="productgrid">
  <div class="product">
    <span class="prodname">Product 1</span>
    <a href="#/">
      <span class="prodprices">
        <span class="prodcost">90.00</span> + <span class="prodfee">10.00</span>
      </span>
    </a>
  </div>
  <div class="product">
    <span class="prodname">Product 2</span>
    <a href="#/">
      <span class="prodprices">
        <span class="prodcost">20.00</span> + <span class="prodfee">5.00</span>
      </span>
    </a>
  </div>
  <div class="product">
    <span class="prodname">Product 3</span>
    <a href="#/">
      <span class="prodprices">
        <span class="prodcost">30.00</span> + <span class="prodfee">10.00</span>
      </span>
    </a>
  </div>
</div>