用于改变HTML结构的jQuery选择器

Question

我正在使用显示产品价格的页面。通常它看起来像这样：

<span id="priceText">
    $26.94
</span>

当商品在售时，它看起来像这样：

<span id="priceText">
    <strike>$26.94</strike>
    <span class="salePrice">$25.00</span> 
</span>

我有一个通用函数可以从任何页面中提取价格：

var getPrice = function(price_id) {
    return jQuery(price_id).text();
};

其中price_id是包含价格的元素的ID。

很明显，这不适用于上述结构，因为如果我将price_id设置为priceText

，“促销”版本将返回$ 26.94和$ 25.00

我无法控制产品页面上的html，因此我无法更改结构。我需要在没有这种HTML结构的其他页面上使用getPrice函数，所以我也想避免更改它。

我正在寻找的是某种jQuery选择器，如果该商品在售，则将返回$ 25.00，如果不是，则返回$ 26.94。像“返回priceText里面的所有文字而不是在标记标记中”

我目前有一个自定义代码段，可以执行以下操作：

jQuery('#priceText .salePrice').length ? jQuery('#priceText .salePrice').text() : jQuery('#priceText strike').text()

但是我想避免像这样的自定义代码行。我认为这可能不仅仅使用jQuery选择器，但我希望有人证明我错了！

Answer 1

您可以使用multiple selector。

jQuery('#priceText .salePrice, #priceText:not(:has(.salePrice))').text()

的 DEMO

Answer 2

也许你可以通过这个减少你的状况：

($('#priceText .salePrice') || $('#priceText strike')).text()