用javascript读取child的child的内容

Question

我想创建一个函数，将价格作为动态内容获取并计算分期付款。我尝试了几种方法，但它们不起作用。不幸的是我没有收到错误消息。

也许你可以帮助我湿透的大脑。提前非常感谢

var wrapper = document.getElementsByClassName('article-price')[0];
   var secondwrapper = wrapper.getElementsByTagName('span')[0];
   var price = secondwrapper.getElementsByTagName('span')[0];
   
   var installment = document.getElementById('installment');
   installment.innerHTML = (price.innerHTML / 12).toFixed(2);

<span class="article-price">
 <span>
  <span>149,99</span>
    <span>€</span>
 </span>
</span>
<div>your installment is <span id="installment"></span></div>

Answer 1

var wrapper = document.getElementsByClassName('article-price')[0];
   var secondwrapper = wrapper.getElementsByTagName('span')[0];
   var price = secondwrapper.getElementsByTagName('span')[0];

   var installment = document.getElementById('installment');
   installment.innerHTML = (parseFloat(price.innerHTML) / 12).toFixed(2);

<span class="article-price">
    <span>
        <span>149,99</span>
    <span>€</span>
    </span>
</span>
<div>your installment is <span id="installment"></span></div>

会不会是 span 里面的逗号把东西扔掉了。不确定它是否有效，但您可以尝试 parseFloat，它应该将其读取为数字或 parseInt；

Answer 2

您只需更改最后一行代码：

installment.innerHTML = (parseFloat(price.innerHTML.replace(/\,/g,"")) / 12).toFixed(2);

Answer 3

将 var price = secondwrapper.getElementsByTagName('span')[0]; 替换为 var price = parseFloat(secondwrapper.getElementsByTagName('span')[0].innerHTML.replace(',','.')); 以获取跨度的内容，并将逗号替换为点以获取字符串作为浮点数。如果你不替换用点替换逗号，JavaScript 将不会理解 '149,99' 是一个数字并且只会保留 '149' 因为 , 不被识别为小数点分隔符，而 . 是。 getElementsByTagName 会给你整个标签，而不仅仅是你想要的里面的值。然后在最后一行，删除 price.innerHTML 到 price 因为你之前已经转换了它。

这里有一个片段可以帮助你

var wrapper = document.getElementsByClassName('article-price')[0];
var secondwrapper = wrapper.getElementsByTagName('span')[0];
var price = parseFloat(secondwrapper.getElementsByTagName('span')[0].innerHTML.replace(',','.'));
var installment = document.getElementById('installment');
installment.innerHTML = parseFloat(price / 12).toFixed(2) + " €";

<span class="article-price">
    <span>
        <span>149,99</span>
        <span>€</span>
    </span>
</span>
<div>your installment is <span id="installment"></span></div>

希望我的回答对您有所帮助！

Answer 4

请检查下面的代码，它可能有帮助

$(document).ready(function(){
 var wrapper = document.getElementsByClassName('article-price');
  alert(wrapper);
  var secondwrapper = wrapper[0].getElementsByTagName('span')[0];
  alert(secondwrapper.innerHTML);
  var price = secondwrapper.getElementsByTagName('span')[0];
  alert(price.innerHTML);
  var installment = document.getElementById('installment');
 installment.innerHTML = (parseFloat(price.innerHTML) / 12).toFixed(2);
});

您必须使用 wrapper[0] 而不是 wrapper ，它将指向跨度的第零个位置，而且您必须将文本更改为 float

installment.innerHTML = (parseFloat(price.innerHTML) / 12).toFixed(2);

用javascript读取child的child的内容

Read the content of a child of a child with javascript

javascript

children