Javascript在父范围上选择范围并使用通配符

Question

我想使用JavaScript选择span中class的{​​{1}}元素，但是选择必须与父"price"和{{1} }“ product-price-895”。另外，我想对ID的数字部分使用通配符，因此选择器必须类似于“＃product-price-*”

span

Answer 1

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

选择器使用child combinator，这意味着它仅关注具有price类的元素，这些元素是id的任何元素的直接子元素属性以"product-price"开头（由于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>

Answer 2

jQuery选择器可以很容易地解决这个问题：https://api.jquery.com/category/selectors/

如果需要使用原始JavaScript，则可以使用document.querySelector（）：https://www.w3schools.com/jsref/met_document_queryselector.asp

Answer 3

如果要从ID为“ product-price-895”的节点中获得“价格”类的子级，则需要使用以下CSS选择器：#product-price-895 > .price。

在javascript中，我将使用：document.querySelector('#product-price-895 > .price')。

Answer 4

要获得父类以price开头的类product-price-的所有范围，可以使用attribute starts with selector ^=

$("span[id^=product-price-] span.price")

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

<span id="product-price-895" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 12,95</span>
<span class="price">€ 13,95</span>
<span class="prices">€ 14,95</span>
<span class="price">€ 15,95</span>
<span><span class="price">€ 18,95</span></span>
</span>
<span class="price">€ 16,95</span>

Answer 5

一种更有效的方法可能是使用属性选择器代替ID。您可以按document.querySelectorAll("[data-price-amount] > .price")或document.querySelectorAll("[data-price-type="finalPrice"] > .price")进行搜索。如果将来生成ID的方式发生变化，这也将为您提供更多的控制和灵活性。