我怎样才能得到 parent div 除了 children 标签的值

Question

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

现在我只想访问 bdi 值，即 74.47，如何使用 jquery 获取它。这是我的 jquery 代码。

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

Answer 1

这是一个one-liner。可能还有很多其他方式：

克隆 bdi 元素
从克隆

span

使用end()到return到克隆的元素
获取内文内容
删除引号

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>

Answer 2

你需要.text()方法只获取bdi然后使用.replace删除美元符号$以及双引号"".

此外，要删除多余的 space，我们需要 .trim() - 为了使用数学，我们需要使用 parseInt 方法将字符串转换为 integar multiplication 然后在 console.log

中得到总数 value

现场演示：（完整的工作代码）

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>

使用 parseFloat 方法确保 decimals 100.9 中的总数为 2 qty

现场演示：

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>

Answer 3

$(selector).text() 将 return 没有 html 代码的值。

Answer 4

尝试

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

这将 return "75.47"，您可以删除引号并转换为双精度

我怎样才能得到 parent div 除了 children 标签的值

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

wordpress

jquery

woocommerce

product-quantity