Javascript select span on parent span and use wildcard - javascript

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>

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>

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

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').

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.

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>

Related

Change the value of span using Javascript or Jquery using <input> or text attribute

I want to change span value to <span class='tag'>test_succeed</span>,
I tried "input" but it doesn't work, any idea ?
<span class="tag" id="tag-option">
<input type='hidden' name='tag-value' value='' id="test-input">
<span class="close"></span>
</span>
<script>
document.getElementById('test-input').value = "test_succeed";
</script>
If you are only trying to add text to the span, you don't need an input element. You can use the innerText function.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
<span class="tag" id="tag-option">
<span class="close"></span>
</span>
<script>
document.getElementById('tag-option').innerText = 'test_succeed';
</script>
EDIT
To keep the "close" span, you can use prepend:
https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend
<span class="tag" id="tag-option">
<span class="close">Close Span</span>
</span>
<script>
document.getElementById('tag-option').prepend('test_succeed');
</script>
When you are talking about <tag>value</tag> you are referring to a DOM object, in this particular case you are trying to update the inner HTML for that tag.
So you can do it using:
document.getElementById('my_id').innerHTML = 'my text';
(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
Or using jQuery:
$('#my_id').html('my text');
(https://api.jquery.com/html/)

How I can set focus on the element when I am setting it to content editable in Angular 6?

I am using the contentEditable attribute of Angular 6 for editing the content of the element (in the ngFor)
How I can set focus on a tag element when it's contentEditable attribute is true?
<div class="tag" *ngFor="let tag of tags">
<span [contentEditable]="underUpdateTagId==tag.id" [textContent]="tag.title
(input)="tag.title=$event.target.textContent">
</span>
<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag)">
<i class="fas fa-pencil-alt"></i>
</span>
<span *ngIf="underUpdateTagId==tag.id" class="update text-success" (click)="editTag(tag)">
<i class="fas fa-check save"></i>
</span>
<span class="delete text-danger" (click)="delete(tag)">
<i class="fas fa-trash-alt"></i>
</span>
</div>
The user interface:
We can use ViewChildren to get a hold of all the spans, by placing a template reference, pick up the span that is selected and set the focus to the element.
So I suggest adding template reference and in your beforeEdit() pass the index of the tag (we get it from ngFor), so we can refer to it when we want to place the focus on the field:
<!-- add template reference in below span tag --->
<span [contentEditable]="underUpdateTagId==tag.id" ... #spans>
<!-- pass index as from ngFor iteration to beforeEdit() -->
<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag, i)">
<!-- more code --->
In the component we refer to spans, the template reference. And when clicked upon specify that the span with the index passed should be focused:
#ViewChildren("spans") spans: QueryList<ElementRef>;
underUpdateTagId = null;
beforeEdit(tag, index) {
this.underUpdateTagId = tag.id;
// wait a tick
setTimeout(() => {
this.spans.toArray()[index].nativeElement.focus();
});
}
STACKBLITZ
PS, this sets the focus in the beginning, you might want it at the end, maybe this question can help you with it if that is the case: Use JavaScript to place cursor at end of text in text input element

Populate elements with class name using Javascript

I have some HTML which looks like this
<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
I would like to use javascript to populate all of the <span> elements with the class hot-drink applied to them with the variable hot-drink-status().
So far I have managed to do this to only one of the elements. The code I wrote looks like this:
var hot-drink = "Avaiable";
document.querySelectorAll('.hot-drink')[0].innerHTML = hot-drink;
I believe I need to change the [0] to something else. I have tried [i] but this does not work.
I know that querySelectorAll is working as it allows me to apply the script to any element. I am just unable to apply the script to all element.
The outcome I am looking for is the HTML to be rendered as below
<p>Latte: <span class="hot-drink">Available</span></p>
<p>Capuccino: <span class="hot-drink">Available</span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
All elements with the class hot-drink are populated with the text "Available"
Try (do not use minus char in variable names - camel case instead)
var hotDrink = 'Available';
document.querySelectorAll('.hot-drink').forEach(el=> el.innerHTML= hotDrink)
<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>

Hide class if another span's child class is visible using jQuery

It's similar to this topic but not working.
Here my codes:
<span class="main_price">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
By default "main_price" and "option_price" class is visible and "option_price_value" class is visible where has the options.
Now I'm trying to hide "main_price" when "option_price_value" is visible.
For more clear,
When has no options by default it's showing
<span class="main_price">
$50
</span>
<span class="option_price">
</span>
And when options available it should look like
<span class="main_price" style="display:none;">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
EDITED to include jquery, my fiddle is working now. Check this new version out: https://jsfiddle.net/cbbs2oms/3/
Basically checking if there's any text in the option span and showing the main price only if there's not option value. Let me know if I've misunderstood.
$(".option_price_value").each(function(){
if ($(this).text().trim().length) {
$('.main_price').hide();
console.log('has option');
} else {
$('.main_price').show();
console.log('has no option');
}
});

wrapping div around string using jquery

How do i wrap a div class div class="includingVAT"></div> around the string text :incl. MwSt
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
incl. MwSt
<span id="plus-shipping">plus-shipping</span>
</span>
using jquery?
it needs to look like this:
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
<div class="includingVAT"> incl. MwSt</div>
<span id="plus-shipping">plus-shipping</span>
</span>
the string without span or div needs the div class includingVAT as there could be different language translations.
You can try this example here: DEMO
var text = $('#plus-shipping').map(function(){
return this.previousSibling.nodeValue
});
$('#plus-shipping').prepend('<div class="includingVAT">' + text[0] + '</div>');
$(".pricelabel").after('<div class="includingVAT">');
$(".plus-shipping").before('</div>');
This is awkward and error-prone. Is there any-way you can insert the whole div? Why does incl. MwSt exist only in the HTML?

Categories