Compare values between tags and filter them by value range in check box?

Question

How to make an Input when Checked filter values between tags ? IN JQUERY

<div class="Container">
<div class="Thumb-Produto" >
<img src="http://www.oqvestir.com.br/Imagens/produtos/85/00048785/00048785_Vitrine.jpg">
<div class="Thumb-Preco">
<span class="Moeda-Preco">R$</span>
<span class="Texto-Preco">50,00</span>
</div>
</div>
</div>

<div class="Container">
<div class="Thumb-Produto" >
<img src="http://www.oqvestir.com.br/Imagens/produtos/23/00054123/00054123_Vitrine.jpg">
<div class="Thumb-Preco">
<span class="Moeda-Preco">R$</span>
<span class="Texto-Preco">150,00</span>
</div>
</div>
</div>

<form>
<INPUT CLASS="FILTRO" TYPE="RADIO" NAME="OPCAO" VALUE="OP1"> R$ 0,00 - 100,00
</form>

Answer 1

To select products that are in the price range on RadioButton selected just retrieve the text attached. Since the next element is a text type node, it is not possible to do this with jQuery, so I used the DOM itself for this.

The way to retrieve the track from the RadioButton is completely dependent on the organization. That is, if you change places, it will stop working. To avoid this, you can use custom attributes to set the track.

For example:

<INPUT CLASS="FILTRO" TYPE="RADIO" NAME="OPCAO" VALUE="OP1" data-min="0" data-max="100"/> R$ 0,00 - 100,00

Just recover this value with the function data jQuery:

var $filtro = $('.FILTRO');
var min = $filtro.data('min');
var max = $filtro.data('max');

// Agora min e max possuem 0 e 100 respectivamente

With this value, just iterate over the containers, fetch the item price and check if its price is in range.

My script was not made with custom attributes because I didn’t want to make changes to your html

Script:

function buscarTextoAoLado(elemento) {
    return elemento.nextSibling.nodeValue.trim();
}

$('.FILTRO').on('click', function(e) {
  var $this = $(this);

  var filtroMin, filtroMax;

  // Pegando o texto e quebrando
  var textoAoLado = buscarTextoAoLado($this.get(0));
  var faixaPreco = textoAoLado.substring("R$ ".length);
  var precos = faixaPreco.split(' - ');

  filtroMin = parseFloat(precos[0].replace(',', '.'));
  filtroMax = parseFloat(precos[1].replace(',', '.'));

  $('.Container').each(function(i, e) {
    var $container = $(this);
    var $textoPreco = $('.Texto-Preco', $container);
    var valor = $textoPreco.html() || $textoPreco.text() || $textoPreco.val();

    var valorFloat = parseFloat(valor.replace(',', '.'));

    if (valorFloat >= filtroMin && valorFloat <= filtroMax) {
      // Sua acao para um container que esta dentro da faixa de preco
      $container.css('border', '5px solid red');
    } else {
      // Sua acao para um container que esta fora da faixa de preco
      $container.css('border', '');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
  <div class="Thumb-Produto">
    <img src="http://www.oqvestir.com.br/Imagens/produtos/85/00048785/00048785_Vitrine.jpg" />
    <div class="Thumb-Preco">
      <span class="Moeda-Preco">R$</span>
      <span class="Texto-Preco">50,00</span>
    </div>
  </div>
</div>

<div class="Container">
  <div class="Thumb-Produto">
    <img src="http://www.oqvestir.com.br/Imagens/produtos/23/00054123/00054123_Vitrine.jpg" />
    <div class="Thumb-Preco">
      <span class="Moeda-Preco">R$</span>
      <span class="Texto-Preco">150,00</span>
    </div>
  </div>
</div>
<form>
  <INPUT CLASS="FILTRO" TYPE="RADIO" NAME="OPCAO" VALUE="OP1" />R$ 0,00 - 100,00
  <INPUT CLASS="FILTRO" TYPE="RADIO" NAME="OPCAO" VALUE="OP2" />R$ 100,00 - 150,00
  <INPUT CLASS="FILTRO" TYPE="RADIO" NAME="OPCAO" VALUE="OP3" />R$ 150,00 - 200,00
</form>

Link to the Jsfiddle