Target second span text when a common class is being used

February 9, 2022

I have some html snippet

<p>
<span class="et-product-ammount">1</span><span>&nbsp;x&nbsp;</span><bdi><span class="et-cart-product-price">CA$</span><span id="sec_price_4082395074_1161" class="et-cart-product-price">89</span></bdi>
</p>

The first instance of .et-cart-product-price shows the currency symbol and the second shows the price.

To get the currency symbol i am using jquery like this

var currency_currency_symbol = $("span.et-cart-product-price").text();

How can i select the text in the first and second occurrence of the et-cart-product-price class respectively?.

>Solution :

Your selector finds multiple elements.

By calling text() on the array, the values are merged.

Since you want both values in a seperate variable, you’ll need to alter the selector, and use (eg) map() to convert the DOM element to the value you need. I’ve use a list syntax to assign the array values to 2 variables:

var currency_currency_spans = Array.from($("span.et-cart-product-price"));

var [ symbol, price ] = currency_currency_spans.map(e => e.innerHTML);
console.log('Symbol:', symbol);
console.log('Price:', price);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <span class="et-product-ammount">1</span>
  <span>&nbsp;x&nbsp;</span>
  <bdi>
    <span class="et-cart-product-price">CA$</span>
    <span id="sec_price_4082395074_1161" class="et-cart-product-price">89</span>      </bdi>
</p>