How can I decrease HTML field values with jQuery?

Question

I have a class in PHP who captures the URL from an external site, this site itself returns me a HTML on the model:

<div id="isOffered">      
    <a class="price  " href="javascript:;">
        <span class="priceText wide  UK">33/20</span>
        <span class="priceText wide  EU">2.65</span>
        <span class="priceText wide  US">+165</span>
        <span class="priceText wide  CH">2.65</span>
        <span class="priceChangeArrow" ></span>
        <input type="hidden" class="betCode" value="0]SK@95553201@362904182@NB*33~20*0*-1*0*0"/>
        <input type="hidden" class="decValue" value="2.65"/>
        <input type="hidden" class="originalBetCode" value="0]SK@95553201@362904182@NB*33~20*0*-1*0*0"/>
     </a>
   </div></div>
                  <div id="s_362904184" class="odds draw suspended">   <div id="isNotOffered" class="hide">    
    <span class="price priceReadonly"></span>
   </div>

   <div id="isOffered">   
    <a class="price  " href="javascript:;">
        <span class="priceText wide  UK">19/10</span>
        <span class="priceText wide  EU">2.90</span>
        <span class="priceText wide  US">+190</span>
        <span class="priceText wide  CH">2.90</span>
        <span class="priceChangeArrow" ></span>
        <input type="hidden" class="betCode" value="0]SK@95553201@362904184@NB*19~10*0*-1*0*0"/>
        <input type="hidden" class="decValue" value="2.90"/>
        <input type="hidden" class="originalBetCode" value="0]SK@95553201@362904184@NB*19~10*0*-1*0*0"/>
     </a>
   </div></div>
                  <div id="s_362904183" class="odds away suspended">   <div id="isNotOffered" class="hide">    
    <span class="price priceReadonly"></span>
   </div>

With the PHP, making use of the DOMDocument() and of DomXpath(), i search the values of tags <span>, decrease the values in 20% of the original, get the value of the field input betCode, and change the values between '~', because they are the divisors responsible for the values in javascript, in PHP a friend here from the forum, a while ago helped me to do in PHP.

But I started to study jQuery, and I saw that I can capture the URL of the site with it, without the need of the PHP, so I did something simple, I took the original website address and replaced it with URL from my server where values are being lowered, I did so:

$('input[value="/services/CouponTemplate.mvc/GetCoupon"]').attr('value', function(_, href){
    return "https://enderecodomeuserver.com/parser.php?url=" + href;
}); 

and it works perfectly, but my doubt is: could I do the same process of decreasing values using the jQuery? As if before the return, I made the decreases using the client’s browser without having to load the server. The jQuery has something similar to DOMdocument?

Answer 1

For you to get the values using jQuery the syntax looks like this:

var valor1 = $("#seletorUsandoIdDoSpan").text();
var valor2 = $(".seletorUsandoClasseDoSpan").text();
// caso o valor esteja em um input voce deve usar .val() ao inves de .text();

var soma = parseFloat(valor1) + parseFloat(valor2);

OBS:

You’ll have to start differentiating your tags with a unique ID (enumerated for example: priceUK1, priceUK2) or else classes that are inside a container with a unique ID.

Otherwise it will be difficult for you with jQuery to find the value you want because it uses selectors, and somehow this selector has to search for only one element.

Example:

    <div id="isOffered1">      
        <a class="price  " href="javascript:;">
            <span class="priceText wide  UK">33/20</span>
            <span class="priceText wide  EU">2.65</span>
            <span class="priceText wide  US">+165</span>
            <span class="priceText wide  CH">2.65</span>
            <span class="priceChangeArrow" ></span>
            <input type="hidden" class="betCode" value="0]SK@95553201@362904182@NB*33~20*0*-1*0*0"/>
            <input type="hidden" class="decValue" value="2.65"/>
            <input type="hidden" class="originalBetCode" value="0]SK@95553201@362904182@NB*33~20*0*-1*0*0"/>
         </a>
       </div>
    </div>
    <div id="s_362904184" class="odds draw suspended">   <div id="isNotOffered" class="hide">    
        <span class="price priceReadonly"></span>
    </div>

    <div id="isOffered2">   
        <a class="price  " href="javascript:;">
            <span class="priceText wide  UK">19/10</span>
            <span class="priceText wide  EU">2.90</span>
            <span class="priceText wide  US">+190</span>
            <span class="priceText wide  CH">2.90</span>
            <span class="priceChangeArrow" ></span>
            <input type="hidden" class="betCode" value="0]SK@95553201@362904184@NB*19~10*0*-1*0*0"/>
            <input type="hidden" class="decValue" value="2.90"/>
            <input type="hidden" class="originalBetCode" value="0]SK@95553201@362904184@NB*19~10*0*-1*0*0"/>
         </a>
       </div>
    </div>
    <div id="s_362904183" class="odds away suspended">   <div id="isNotOffered" class="hide">    
        <span class="price priceReadonly"></span>
    </div>

With two different id containers: isOffered1 and isOffered2 you can already differentiate your values using jQuery. Example:

var valor1 = $("#isOffered1 .priceText.EU").text(); // output: "2.65"
var valor2 = $("#isOffered2 .priceText.EU").text(); // output: "2.90"
var soma = parseFloat(valor1) + parseFloat(valor2); // output: "5.55"