How can I decrease HTML field values ​​with jQuery?

Question:

I have a class in PHP that captures the URL of an external site, this site itself returns an HTML in the template:

<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 PHP , making use of DOMDocument() and DomXpath() , I DomXpath() the values ​​of the <span> tags, decrease the values ​​by 20% of the original, get the value of the input betCode field input betCode , and change the values ​​between '~' , as they are the divisors responsible for the values ​​in javascript, in PHP a friend here on the forum, a while ago helped me to do in PHP .

But I started to study jQuery , and saw that I can capture the website's URL with it, without the need for PHP , so I did something simple, I took the original website address and replaced it with the URL of my server where the values ​​are being decreased, 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 question is: would I be able to do the same process of decreasing the values ​​using jQuery ? As if before the return , I made the decreases using the client's browser without having to load the server. Does jQuery have something similar to DOMdocument ?

Answer:

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);

NOTE:

You will have to start distinguishing your tags with a unique ID (listed for example: priceUK1, priceUK2) or 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 look 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 containers with different id: isOffered1 and isOffered2 you can already differentiate their 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"
Scroll to Top