使用 jQuery 删除多余的破折号

Question

这是我的情况。我正在帮助客户处理他们的 Woocommerce (WordPress) 网站。我一直在使用 jquery 来隐藏较高的变化价格，只显示较低的价格。仍然显示“-”，我想用 jQuery 删除它。我已经尝试了几个小时但没有成功。帮助将不胜感激。

这是我的 HTML 代码：

<span class="price"><del><span class="amount">.29</span>–<span class="amount">2.25</span>

</del> <ins><span class="amount">.63</span>–<span class="amount">1.84</span></ins>

</span>
<div class="product-meta-wrapper">

<h3 class="heading-title product-title"><a href="http://sproutman.com/shop/product/beginners-dozen-seeds/">Beginner’s Dozen Sprouting Seeds</a></h3>

<div class="second-rating"></div>   <span class="price"><del><span class="amount">.92</span>

</del> <ins><span class="amount">.89</span></ins>

</span>
<div class="list_add_to_cart"><a href="/product-category/organic-sprouting-seeds/recommendations-for-beginners/?add-to-cart=650" rel="nofollow" data-product_id="650" data-product_sku="SPRTSAMP" class="button add_to_cart_button product_type_simple">Add to cart</a>

</div>
</div>

还有我的 jquery 代码：

$(document).ready(function () {
var firstHighPrice = $('del span:nth-child(2)');
var secondHighPrice = $('ins span:nth-child(2)');
firstHighPrice.hide();
secondHighPrice.hide();

});

JSFiddle 链接：http://jsfiddle.net/a5Lyxsur/2/

Answer 1

如果您知道您要隐藏的 span 之前的文本是您也想删除的 -，那么只需使用 previousSibling 获取要删除的文本节点：

firstHighPrice.hide();
$(firstHighPrice[0].previousSibling).remove();

secondHighPrice.hide();
$(secondHighPrice[0].previousSibling).remove();

演示：http://jsfiddle.net/a5Lyxsur/3/

Answer 2

如果你把 <span></span> 标签放在“-”周围，如下所示

<span class="price">
    <del>
        <span class="amount">.29</span>
        <span>–<span>
        <span class="amount">2.25</span>
   </del>

然后修改选择器如下图

$(document).ready(function () {
    var firstHighPrice = $('del span:nth-child(2), del span:nth-child(3)');
    var secondHighPrice = $('ins span:nth-child(2), ins span:nth-child(3)');
    firstHighPrice.hide();
    secondHighPrice.hide();
});

工作样本位于 http://jsfiddle.net/a5Lyxsur/4/

Answer 3

在此 each 中，函数应用于每个 span 和 class price 和 detach method to the del and ins elements and their span elements within. Then empty method is used to remove the dash (-). Finally, the previously detached elements are appended back again. Fiddle

$('span.price').each(function () {
    var delSpans = $(this).find('del span').detach();

    $(this).find('del').empty();

    $(this).find('del').append(delSpans);

    var insSpans = $(this).find('ins span').detach();

    $(this).find('ins').empty();

    $(this).find('ins').append(insSpans);
});

var firstHighPrice = $('del span:nth-child(2)');
var secondHighPrice = $('ins span:nth-child(2)');
firstHighPrice.hide();
secondHighPrice.hide();

使用 jQuery 删除多余的破折号

Remove extra dashes with jQuery

wordpress

jquery

woocommerce

演示：http://jsfiddle.net/a5Lyxsur/3/