Javascript 在父跨度上选择跨度并使用通配符

Question

我想使用 JavaScript 选择 class 为 "price" 的 span 元素，但选择必须使用父 span 的 id“product-price-895”。此外，我想对 ID 的数字部分使用通配符，因此选择器必须类似于“#product-price-*”

<span  id="product-price-895"  data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper " >
<span class="price">€ 12,95</span>
</span>

Answer 1

您可以使用以下 CSS 选择器:[id^=product-price] > .price。

选择器使用 child combinator这意味着它只关注具有 price 类的元素，这些元素是 id 属性以 开头的任何元素的直接子元素 “产品价格”(由于 attribute selector )。

var spanEls = document.querySelectorAll('[id^=product-price] > .price');
spanEls.forEach(span => console.log(span.innerHTML));

<span id="product-price-1" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 12,95</span>
</span>
<span id="product-price-2" data-price-amount="5.50" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 5,50</span>
</span>
<span id="product-price-3" data-price-amount="25.90" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 25,90</span>
</span>