javascript - 具有嵌套跨度的 jQuery .not() 和 .each()

Question

我正在编辑其中嵌套了另一个跨度的跨度的值。我试图从本质上排除我的 .each() 中的嵌套跨度类功能。

代码编辑购买的价格值，从中减去一个百分比，问题是它还通过删除它来编辑货币代码跨度。

$('.price').each(function() {

    var val = $(this).text();
    var num = parseFloat(val);
    var discount = num - (num * .40);

  $(this).text(discount);
});

HTML 看起来像这样:

- <span class="price">1000 <span class="currency">KR</span></span><br>
- <span class="price">100 <span class="currency">KR</span></span><br>
- <span class="price">2000 <span class="currency">KR</span></span><br>
- <span class="price">6000 <span class="currency">KR</span></span><br>
- <span class="price">10000 <span class="currency">KR</span></span>

排除嵌套的div <span class="currency">KR</span>我正在运行以下内容:

$('.price').not('.currency').each(function() { //etc etc });

需要注意的是逻辑一定是这样的，我只能用一个嵌套的<span> .

Answer 1

使用 .contents() 它将返回所有节点，包括文本节点，选择第一个并计算折扣，不选择第二个节点，在折扣前添加折扣并将新字符串设置为html。

$(function() {

  $('.price').each(function() {

    var val = $(this).contents()[0].textContent;
    var num = parseFloat(val);
    var discount = num - (num * .40);
    $(this).html(function(){
        return $(this).html().replace(val, discount+" ");
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">1000 <span class="currency">KR</span></span>
<br>
<span class="price">100 <span class="currency">KR</span></span>
<br>
<span class="price">2000 <span class="currency">KR</span></span>
<br>
<span class="price">6000 <span class="currency">KR</span></span>
<br>
<span class="price">10000 <span class="currency">KR</span></span>