使用公共类时定位第二个跨度文本

【问题标题】：Target second span text when a common class is being used使用公共类时定位第二个跨度文本
【发布时间】：2022-02-11 18:20:49
【问题描述】：

我有一些 html sn-p

<p>
<span class="et-product-amount">1</span><span>&nbsp;x&nbsp;</span><bdi><span class="et-cart-product-price">CA$</span><span id="sec_price_4082395074_1161" class="et-cart-product-price">89</span></bdi>
</p>

.et-cart-product-price 的第一个实例显示货币符号，第二个显示价格。

要获取货币符号，我正在使用这样的 jquery

var currency_currency_symbol = $("span.et-cart-product-price").text();

如何分别选择et-cart-product-price 类的第一次和第二次出现的文本？

【问题讨论】：

你想要两个变量，一个是价格，一个是符号？
是的，没错。

标签： html jquery

【解决方案1】：

您的选择器找到多个元素。

通过在数组上调用text()，值被合并。

由于您希望将这两个值放在一个单独的变量中，因此您需要更改选择器，并使用（例如）map() 将 DOM 元素转换为您需要的值。我使用列表语法将数组值分配给 2 个变量：

var currency_currency_spans = Array.from($("span.et-cart-product-price"));

var [ symbol, price ] = currency_currency_spans.map(e => e.innerHTML);
console.log('Symbol:', symbol);
console.log('Price:', price);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <span class="et-product-amount">1</span>
  <span>&nbsp;x&nbsp;</span>
  <bdi>
    <span class="et-cart-product-price">CA$</span>
    <span id="sec_price_4082395074_1161" class="et-cart-product-price">89</span>      </bdi>
</p>

【讨论】：