How to return different answers with different values in equal classes?

5

I have two different values that should return different answers, but the classes are the same, how to solve?

See that the answers are wrong.

.Container-Produto{display:block;border:solic 1px #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="Container-Produto">
                    <div class="Preco">99,00</div>
                    <a class="Frete-a"></a>
                    </div>  
                    
                    <div Class="Container-Produto">
                    <div class="Preco">98,00</div>
                    <a class="Frete-a"></a>
                    </div> 


<script>
         jQuery("document").ready(function($){
         $('.Preco').ready(function() {
         var preco = $('.Preco').text();
         preco = parseFloat( preco.replace( '.', '' ).replace( ',', '.'         ) );
         if( preco > 98.99 ) {
         $('.Frete-a').text( 'Frete Grátis' );
         } else {
         $('.Frete-a').text( 'Sem Frete Grátis' );
         }
         });
         });
</script>
    
asked by anonymous 25.10.2014 / 01:20

2 answers

7

If you have multiple elements with these classes, you need to loop the set and change them one by one. You can do this with jQuery using .each() :

jQuery(document).ready(function($){
    $('.Preco').each(function() {
         var preco = $(this).text();
         preco = parseFloat( preco.replace( '.', '' ).replace( ',', '.') );
         if( preco > 98.99 ) {
             $(this).next('.Frete-a').text( 'Frete Grátis' )
         } else {
             $(this).next('.Frete-a').text( 'Sem Frete Grátis' );
         }
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="Container-Produto">
    <div class="Preco">99,00</div>
    <a class="Frete-a"></a>
</div>  
                    
<div Class="Container-Produto">
    <div class="Preco">98,00</div>
    <a class="Frete-a"></a>
</div>

Note the other settings I made in your code:

  • There is no $('.Preco').ready , I used .each instead.
  • Within the loop, this is the div of price currently being accessed
  • I used .next relative to the price div to pick up the next freight anchor
  • 25.10.2014 / 02:45
    7

    Your code in jQuery is almost there, but when working with multiple elements you have to refer to each element one by one, so you can act on each of the various elements found without influencing the rest.

    For this you can use this in JavaScript or $(this) in jQuery. See this question to learn more .

    As you are referring to a class and not to the element X, the change occurs in everyone who has the class you referred to.

    To avoid this, in jQuery you have the function .each that allows you to iterate through each element:

    jQuery("document").ready(function($){
    
        // Por cada elemento com classe 'Preco'
        $('.Preco').each(function() {
    
            var $this = $(this),                                    // eu
                preco = parseFloat($this.text().replace(",", ".")); // o meu valor
    
            // Definir o texto a usar
            var frete = ((preco > 98.99) ? '' : 'Sem ') + 'Frete Grátis';
    
            // Atualizar elemento a seguir a "eu"
            $this.next('.Frete-a').text(frete);
        });
    });
    

        jQuery("document").ready(function($){
    
            // Por cada elemento com classe 'Preco'
            $('.Preco').each(function() {
    
                var $this = $(this),                                    // eu
                    preco = parseFloat($this.text().replace(",", ".")); // o meu valor
        
                // Atualizar elemento a seguir a "eu"
                var frete = ((preco > 98.99) ? '' : 'Sem ') + 'Frete Grátis';
    
                $this.next('.Frete-a').text(frete);
            });
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="Container-Produto">
        <div class="Preco">99,00</div>
        <a class="Frete-a"></a>
    </div>  
    
    <div Class="Container-Produto">
        <div class="Preco">98,00</div>
        <a class="Frete-a"></a>
    </div>

    Example also available on JSFiddle .

        
    25.10.2014 / 02:44