Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How can i get a value of parent div except children tag – Woocommerce

<bdi>
   <span class="woocommerce-Price-amount amount">$</span>
"75.47"
</bdi>

Now i want to access bdi value that is 74.47 only, how can i fetch it by using jquery. Here is my jquery Code.

jQuery(document).ready(function($){
    $('.qty').on('change',function(){
         // grab the price
         var price = $('bdi').children().not('span').html();
         var total_price = price * this.value;
         console.log(price, this.value, total_price);
    });
})
Tags:

4

Answers


  1. 0

    Here is a one-liner. There are probably many other ways:

    1. Clone the bdi element
    2. Remove the span from the clone
    3. Use end() to return to the cloned element
    4. Get the inner text content
    5. Remove the quotes
    const str = $('bdi').clone().find('span').remove().end().text().split('"')[1];
//                   ^ (1)                ^ (2).   ^ (3)  ^ (4) ^ (5)
console.log(str);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<bdi>
   <span class="woocommerce-Price-amount amount">$</span>
"75.47"
</bdi>
    Login or Signup to reply.
  2. 0

    You need to .text() method to grab the bdi only and then use .replace to remove the dollar sign $ as well the double quotes "".

    Also, to remove the extra space we need to .trim() – In order to use maths we need convert the string to integar using parseInt methof to do the multiplication and then get the total value in the console.log

    Live Demo: (Full working code)

    jQuery(document).ready(function($) {
  $('.qty').on('change', function() {
    // grab the price
    var price = $('bdi').text().replace("$", "").replace(/"/g, "").trim() //75.47
    var total_price = parseInt(price) * parseInt($(this).val());
    console.log(total_price); //some results after selecting the product
    console.log(price ); //75.47
  });
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="qty">
  <option disabled selected>Choose</option>
  <option value="25">Some Value 25</option>
  <option value="75">Some Value 75</option>
</select>

<bdi>
  <span class="woocommerce-Price-amount amount">$</span>
  "75.47"
</bdi>

    Using parseFloat Method to make sure the total in in decimals 100.9 for 2 qty

    Live Demo:

    jQuery(document).ready(function($) {
  $('.qty').on('change', function() {
    // grab the price
    var price = $('bdi').text().replace("$", "").replace(/"/g, "").trim() //75.47
    var total_price = parseFloat(price) * parseFloat($(this).val());
    console.log(total_price); //some results after selecting the product
  });
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="qty">
  <option disabled selected>Choose</option>
  <option value="2">Qty 2</option>
  <option value="5">Qty 5</option>
</select>

<bdi>
  <span class="woocommerce-Price-amount amount">$</span>
  "50.45"
</bdi>
    Login or Signup to reply.
  3. 0

    $(selector).text() will return value without html code in it.

    Login or Signup to reply.
  4. 0

    Try

    var price = $('bdi').children().remove().end().text();

    That will return "75.47", you can remove quotes and convert to double

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search