除了子标记之外，如何获得父div的值？

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

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

另外，为了去掉.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方法确定2qty在decimals 100.9中的总和

现场演示：

​

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 2

这是一条单线。可能还有很多其他的方法：

克隆

1. 克隆bdi元素
2. 从克隆
3. 中删除span使用end()返回到克隆元素

<

1. >H 110获取内部文本
2. 引号H 213G 214

​

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 3

$(selector).text()将返回不包含html代码的值。