我想使用JavaScript选择span
中class
的{{1}}元素,但是选择必须与父"price"
和{{1} }“ product-price-895”。另外,我想对ID的数字部分使用通配符,因此选择器必须类似于“#product-price-*”
span
答案 0 :(得分:2)
您可以使用以下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>
答案 1 :(得分:0)
jQuery选择器可以很容易地解决这个问题:https://api.jquery.com/category/selectors/
如果需要使用原始JavaScript,则可以使用document.querySelector():https://www.w3schools.com/jsref/met_document_queryselector.asp
答案 2 :(得分:0)
如果要从ID为“ product-price-895”的节点中获得“价格”类的子级,则需要使用以下CSS选择器:#product-price-895 > .price
。
在javascript中,我将使用:document.querySelector('#product-price-895 > .price')
。
答案 3 :(得分:0)
要获得父类以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>
答案 4 :(得分:0)
一种更有效的方法可能是使用属性选择器代替ID。您可以按document.querySelectorAll("[data-price-amount] > .price")
或document.querySelectorAll("[data-price-type="finalPrice"] > .price")
进行搜索。如果将来生成ID的方式发生变化,这也将为您提供更多的控制和灵活性。