I need to change a text in a span.
<span class="count_bottom">
<i class="blue">
<i class="fa fa-sort-asc"></i>
12%
</i>
From last seen
</span>
I only need to change From last seen text according to button click event.
How can I do this?
Filter out non-empty text nodes inside space and then replace with new content.
$('.count_bottom')
// get all child nodes
.contents()
// filter out non-empty text node
.filter(function() {
// check node type and content
return this.nodeType === 3 && this.nodeValue.trim().length;
// replace it with new content
}).replaceWith('new text');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count_bottom"><i class="blue"><i class="fa fa-sort-asc"></i>12% </i> From last seen</span>
With pure JavaScript
// get the `i` tag inside `span`
document.querySelector('.count_bottom > i')
// get adjacent text node which is immediately after the element
.nextSibling
// update text content of the text node
.textContent = 'new text';
<span class="count_bottom"><i class="blue"><i class="fa fa-sort-asc"></i>12% </i> From last seen</span>
You can select first i element in span and use nextSibling property to getting next sibling text of it.
$("button").click(function(){
$(".count_bottom > i")[0].nextSibling.nodeValue = "New value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change text</button>
<span class="count_bottom">
<i class="blue">
<i class="fa fa-sort-asc"></i>
12%
</i>
From last seen
</span>
Related
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
My problem is to split the Dom element using jquery.
<span class="start">
<span class="second">
new text <span class='split'>is written</span> in this place.
</span>
</span>
And I want to Split the above DOM Like this.
<span class="start"><span class="second">new text</span></span>
<span class="start"><span class="second">is written</span></span>
<span class="start"><span class="second">in this place.</span></span>
Please, anybody give me some advice.
One way to do it would be:
last_text=$('.split')[0].nextSibling; //get textNode after split span
prev_text=$('.split')[0].previousSibling; //get text Node before split span
current=$('.split').text(); //get split span text
$('.second').html(' '); //clear current html
cloned1=$('.start').clone(); // clone el
cloned1.insertAfter($('.start'));
cloned2=$('.start').first().clone(); //clone one more
cloned2.insertAfter($('.start').last());
//set text for elements
$('.start .second').eq(0).html(prev_text);
$('.start .second').eq(1).html(current);
$('.start .second').eq(2).html(last_text);
Demo:
last_text=$('.split')[0].nextSibling; //get textNode after split span
prev_text=$('.split')[0].previousSibling; //get text Node before split span
current=$('.split').text(); //get split span text
$('.second').html(' '); //clear current html
cloned1=$('.start').clone(); // clone el
cloned1.insertAfter($('.start'));
cloned2=$('.start').first().clone(); //clone one more
cloned2.insertAfter($('.start').last());
//set text for elements
$('.start .second').eq(0).html(prev_text);
$('.start .second').eq(1).html(current);
$('.start .second').eq(2).html(last_text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="start">
<span class="second">
new text <span class='split'>is written</span> in this place.
</span>
</span>
P.S. If there are no classes (i guess that could be the case), you will have to use different selectors, to target spans (inside container?), with eq(), maybe, but, basically, this simple logic should work...
I have looked and I still can not figure out how to copy a <p> class named "booking-item-header-price" to the <div> named "myDiv" (basically cloning the <p> to the <div> with JavaScript. It might be important to note that the contents of the <p> class changes based on the price of the item. I have tried some things on JSFiddle but to no avail. Any help would be appreciated.
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
If you are wanting to move the element: call appendChild() on the parent element you want to add the element to (#myDiv) with a reference to the element you want to move, your <p> element.
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child );
If you want to copy the element: use cloneNode() on the child element to make a copy before appending. Pass in true for a deep copy,
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child.cloneNode(true) );
Note in the copying version you will lose any event listeners you might have applied like through addEventListener()
Demo
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child.cloneNode(true) );
#myDiv {
padding:30px;
border:1px solid;
}
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
function copy(){
document.querySelector('#myDiv').innerHTML =
document.querySelector('.booking-item-header-price').innerHTML;
}
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
<button type="button" onclick="copy()">
Copy to #myDiv
</button>
This way we get the innerHTML (all the content including html tags) inside the .booking-item-header-pricep and assign it to the innerHTML of the #myDiv div.
I want to test with protractor if a popover pops up. This is the my html. The popover sits in the last child span:
<span tariff-popover="views/popovers/c2g/airport.html" class="ng-isolate-scope">
<span ng-transclude="">
<span class="ng-scope">
Flughafenpauschale
</span>
</span>
<span popover-placement="right" popover-template="text" popover-trigger="mouseenter" class="fa fa-info-circle">
</span>
</span>
How do I select the last span? I need to select it based on the value of tariff-popover on the parent span. This is how I've tried to selet it:
it('should display the popover-content on mouseover', function() {
var popover = element(by.css('span[tariff-popover=views/popovers/c2g/airport.html] > .fa.fa-info-circle'));
console.log(popover.getInnerHtml());
/* more tests here */
});
The console.log gives me errors as the css selector is wrong. Any suggestions?
There should be quotes around the tariff-popover value. Try with this -
var popover = element(by.css('span[tariff-popover="views/popovers/c2g/airport.html"] > .fa.fa-info-circle'));
And moreover .getInnerHtml() will return a promise. So, you need to wait for it to return a value. Here's how -
popover.getInnerHtml().then(function(val){
console.log(val);
});
Hope this helps.
I have some html that is in the form
<span class="prefix">something</span> (Optional)
Text
<span class="badge">Something else</span> (optional, can be multiple)
<span class="postfix">Another thing</span>
And I want to wrap the Text, but not the spans, in another span so that I can extract and replace it using jQuery as necessary. I can't edit the back end code that is generating this HTML. Given that I don't know in advance whether the first span will be there, or how many spans there will be at the end, is there any way to wrap the plain text so that it can be operated on?
I am hoping to get an output that looks something like this:
<span class="prefix">something</span>
<span class="txt">Text</span>
<span class="badge">something else</span>...
<span class="postfix">another thing</span>
Try this:
$('#container').contents()
.filter(function() { return this.nodeType === 3 })
.wrap('<span class="txt" />');
Based on this answer: https://stackoverflow.com/a/5291776/616535
filter() the contents() of the container element to those that are pure text nodes
wrap() them in a span
$('#container').contents().filter(function() {
return $(this)[0].nodeValue && $(this)[0].nodeValue.trim();
}).wrap('<span class="txt"/>');
.txt{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<span class="prefix">something</span>
Text
<span class="badge">Something else</span>
<span class="postfix">Another thing</span>
</div>