CODEWITHSUNDEEP
jqueryhtml
John
John

Reputation: 619

How to refer to element using jQuery

I am trying to get the value that is already existing in HTML element and pass it to another using jQuery. I ma not sure if I am referring to the element incorrectly as it returns Not a number value. Can you please look at my code and help:

var oldPrice = parseFloat(jQuery('.product-price-worth .price .price').first().text().replace(/[^0-9\.]+/g, ""), 10);

$('div.ratio-div').html('<p>Now ' + oldPrice + '</p>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="regular-price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    
        <link itemprop="availability" href="http://schema.org/InStock" content="In Stock">
        <span id="product-price-12674" class="product-price-worth">
            <span class="symbol-block">
                                    <span class="price-comment">Now</span>
<span class="currency-symbol">£</span>
</span>
<span itemprop="price">
                <span class="price"><span class="currency"></span>169</span>
</span>
</span>


</span>

<div class="ratio-div">&nbsp;</div>

JSFiddle

Upvotes: 0

Views: 206

Answers (5)

fdomn-m
fdomn-m

Reputation: 28611

Your first .price in the selector

'.product-price-worth .price .price'

does not exist as the span is

<span itemprop="price">

you can:

  • change the selector to:

    '.product-price-worth [itemprop="price"] .price'

  • change the span to

  • remove one the .price completely as [space] in a selector means any child at any level, not just direct descendents

    '.product-price-worth .price'

Updated fiddle: https://jsfiddle.net/nqo6n8e6/4/

Upvotes: 0

Sumanta736
Sumanta736

Reputation: 705

Your code is perfect, but you use two class as same name (.price) in jquery. Try this:

var oldPrice = parseFloat(jQuery('.product-price-worth      .price').first().text().replace(/[^0-9\.]+/g, ""), 10);

     $('div.ratio-div').html('<p>Now ' + oldPrice + '</p>');
<span class="regular-price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    
        <link itemprop="availability" href="http://schema.org/InStock" content="In Stock">
        <span id="product-price-12674" class="product-price-worth">
            <span class="symbol-block">
                                    <span class="price-comment">Now</span>
<span class="currency-symbol">£</span>
</span>
<span itemprop="price">
                <span class="price"><span class="currency"></span>169</span>
</span>
</span>


</span>

<div class="ratio-div">&nbsp;</div>

Upvotes: 1

NiallMitch14
NiallMitch14

Reputation: 1229

If you add an id to the span with the price class like this:

<span class="price" id="oldPrice"><span class="currency"></span>169</span>

Then you could get the value back like this:

var oldPrice = parseFloat($('#oldPrice').text());

Upvotes: 1

Vijay Arun
Vijay Arun

Reputation: 414

oldprice = jQuery('.product-price-worth span.price').text();
oldprice = parseFloat(oldprice.replace(/[^0-9\.]+/g, ""), 10);

Upvotes: 1

ameenulla0007
ameenulla0007

Reputation: 2683

var oldPrice = parseFloat(jQuery('.product-price-worth [itemprop="price"] .price').first().text().replace(/[^0-9\.]+/g, ""), 10);
$('div.ratio-div').html('<p>Now ' + oldPrice + '</p>');

you need to use the attribute selector there, edited [itemprop="price"] as you have used itemprop as an attribute before class price element. https://jsfiddle.net/nqo6n8e6/3/

Upvotes: 1

Related Questions