Question

我正在尝试在此页面上隔离订单总数： https://www.brawtaliving.com/checkout/order-received/3014/?key=wc_order_zzPLbJK6Tnsjy

我已经能够使用以下方法将HTMLCollection缩小为包含订单总数的数字：

console.log(document.getElementsByClassName('woocommerce-Price-amount amount'))

但是我如何缩小到仅显示$ 78,334.00？

这是我得到的HTMLCollection-价格在第一个中：

<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">…</span>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">…</span>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">…</span>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">…</span>

Answer 1

参考jquery text()了解更多详细信息，该解决方案对我有用

console.log($('li.total .woocommerce-Price-amount.amount').text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
      <li class="total">
        Total:
        <strong>
          <span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">
            <span class="woocommerce-Price-currencySymbol">$</span>78,334.00
          </span>
        </strong>
      </li>
    </body>

Answer 2

在末尾添加[0].textContent

console.log(document.getElementsByClassName('woocommerce-Price-amount amount')[0].textContent);

<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;"><span class="woocommerce-Price-currencySymbol">$</span>78,334.00</span>

Answer 3

如果使用的是jquery，请使用text()函数。它将返回所选标签中的所有文本。希望有帮助

var total = $('.woocommerce-Price-amount').text()
console.log(total)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;"><span class="woocommerce-Price-currencySymbol">$</span>78,334.00</span>

Answer 4

我认为@Jack Bashford的回答对您的问题是正确的。我提供与他类似的解决方案，但用途更广泛：

// if you want the first - @Jack Bashford's solution
console.log('By Jack Bashford:');
console.log(document.getElementsByClassName('woocommerce-Price-amount amount')[0].textContent);

// if you would like to have more freedom to process the selected collection
console.log('By Gergely Muka:');
[...document.getElementsByClassName('woocommerce-Price-amount amount')].forEach(
  (element, index, array) => {
    console.log(element.textContent)
  }
);

<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">1</span>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">2</span>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">3</span>
<span class="woocommerce-Price-amount amount" onclick="window.location='undefined'" style="cursor: pointer;">4</span>

您的解决方案可能需要一个编译器，才能在较旧的浏览器上使用它。

如何使用DOM隔离元素

4 个答案: