Question

示例HTML

 <li class="order-overview__total total">
    Total:                  
    <strong>
       <span class="price-amount amount">
         <span class="price-currencySymbol">$</span>**29.99**
       </span>
    </strong>
 </li>

如何仅选择此特定示例中的金额为29.99？我已经尝试了li.total span.amount，但我也得到了跨度。此外，li.total span.amount:not(span)无效。我在控制台document.querySelectorAll("li.total span.amount:not(span)")中执行此操作。我想要的是获得除符号之外的实际值。

Answer 1

您可以选择带符号的价格，然后选择符号，并使用字符串替换删除符号：

var price = document.querySelector('.price-amount').innerText;
var s= document.querySelector('.price-amount .price-currencySymbol').innerText;

var final= price.replace(s, "");
console.log(final);

<li class="order-overview__total total">
    Total:                  
    <strong>
       <span class="price-amount amount">
         <span class="price-currencySymbol">$</span>**29.99**
       </span>
    </strong>
 </li>

如果你想要样式你可以应用相同的逻辑，你设置一切然后重置符号的样式：

.price-amount {
  color:red;
  font-size:25px;
}
.price-amount .price-currencySymbol {
  color:initial;
  font-size:initial;
}

<li class="order-overview__total total">
    Total:                  
    <strong>
       <span class="price-amount amount">
         <span class="price-currencySymbol">$</span>**29.99**
       </span>
    </strong>
 </li>

Answer 2

您无法在一个选择器中执行此操作。我喜欢@ temani-afif的答案，因为它简单（低复杂性）。但是可能有理由提取DOM节点而不仅仅是文本值。你可以用两个循环来做到这一点：

// loop through all .amount spans
document.querySelectorAll("li.total span.amount").forEach(x => {
    // loop through all child nodes of .amount
    x.childNodes.forEach(y => {
        const nv = y.nodeValue;
        // ignore HTML nodes (nodeValue=null) and empty strings
        if (nv && nv.trim()) {
            console.log(nv);
        }
    })
})

css选择内部文本而不是子项

2 个答案: