我想从多个类中获取 InnerHTML 元素

Question

我可以从单个 class 中获取内部 HTML 值，并使用下面的

输出到控制台

var price = document.getElementsByClassName("price1")[0].innerHTML;
console.log(price);

但是，我现在想从 3 class 中获取数值并将它们组合成一个数值。

HTML 看起来像这样

<div class="price">
 <span class="pounds">45</span>
 <span class="seperator">.</span>
 <span class="pence">99</span>
</div>

要求的结果是将45.99作为数值输出到控制台。

Answer 1

您可以保存所有值并在控制台记录它们的插值。 + 用于将字符串转换为数字。

针对嵌套两个 span 元素的情况进行了编辑：

const pounds = document.getElementsByClassName("pounds")[0].innerHTML;
const separator = document.getElementsByClassName("separator")[0].innerHTML.split('<')[0];
const pence = document.getElementsByClassName("pence")[0].innerHTML;

const price = +`${pounds}${separator}${pence}`
console.log(typeof price, price);

<div class="price">
  <span class="pounds">45</span>
  <span class="separator">.<span class="pence">99</span></span>
</div>

Answer 2

这里有一个小方法。

window.onload = function () {
  const prices = document.getElementsByClassName("price");
  Array.from(prices).forEach(function(oPrice){
      let currentPrice = oPrice.querySelector(".pounds").innerHTML;
      currentPrice += oPrice.querySelector(".seperator").innerHTML;
      currentPrice += oPrice.querySelector(".pence").innerHTML;
      console.log(currentPrice);
  });
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Prices</title>
</head>
<body>
  <div class="price">
   <span class="pounds">45</span>
   <span class="seperator">.</span>
   <span class="pence">99</span>
  </div>
</body>
</html>

选择所有价格，然后通过 querySelectors 使用 forEach 来“组合”价格。请注意，“currentPrice”是一个字符串。如果您需要该值作为数字，则必须转换该字符串。这对你有帮助吗？

我想从多个类中获取 InnerHTML 元素

I want to get the InnerHTML elements from multiple classes

javascript

console

jquery

我想从多个 类 中获取 InnerHTML 元素

I want to get the InnerHTML elements from multiple classes

javascript

console

jquery

我想从多个类中获取 InnerHTML 元素