0

I want to use JavaScript to select the span element with a class of "price", but the selection has to be with the parent span with id "product-price-895". Additionally, I want to use a wildcard for the number part of the ID, so the selector has to be something like "#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>
Tom O.
  • 5,730
  • 2
  • 21
  • 35
Jilco Tigchelaar
  • 2,065
  • 8
  • 31
  • 51
  • What do you want to accomplish exactly? Why can't you use the `price-wrapper` class instead of the partial id, or why not directly the `price` class? – Andreas Jan 14 '19 at 14:37
  • The price wrapper occurs about 10 times, i only want to do something with the one that is enclosed by the one with the product-price-895 – Jilco Tigchelaar Jan 14 '19 at 14:39
  • So you know the complete id. Then why the "wildcard" thing? – Andreas Jan 14 '19 at 14:39
  • Where did you get stuck? Have you read about [attribute-selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)? – David Thomas Jan 14 '19 at 14:39
  • Possible duplicate of https://stackoverflow.com/questions/1938294/select-div-using-wildcard-id – misorude Jan 14 '19 at 14:40
  • `document.querySelectorAll("span[id^=product-price-]")` Would do the wildcard bit – frobinsonj Jan 14 '19 at 14:40

5 Answers5

2

You can use the following CSS selector: [id^=product-price] > .price.

The selector uses a child combinator which means it is only concerned with elements having the class of price that are an immediate child of any element whose id attribute begins with "product-price" (due to the 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>
Tom O.
  • 5,730
  • 2
  • 21
  • 35
0

jQuery selectors can handle this fairly easily: https://api.jquery.com/category/selectors/

If you need to use vanilla JavaScript, you can use document.querySelector(): https://www.w3schools.com/jsref/met_document_queryselector.asp

Aaron A
  • 68
  • 7
0

If you want the child with the class "price" from the node with the id "product-price-895", you need to use the following css selector: #product-price-895 > .price.

In javascript I would use: document.querySelector('#product-price-895 > .price').

thibpat
  • 714
  • 5
  • 17
0

To get all the spans with the class price where the parent starts with product-price- you could use an 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>
The fourth bird
  • 154,723
  • 16
  • 55
  • 70
0

A more efficient way may be to use an attribute selector instead of the ID. You could search by document.querySelectorAll("[data-price-amount] > .price") or document.querySelectorAll("[data-price-type="finalPrice"] > .price"). This will also give you a bit more control and flexibility if the way your IDs get generated changes in the future.

jmcgriz
  • 2,819
  • 1
  • 9
  • 11