I want to clear out the "normal text", but no glyphicon's.
The important code sections and its results:
$("#btn_test").html() will give me:
"<span class="glyphicon glyphicon-floppy-disk"
aria-hidden="true"></span> Speichern & schließen"
$("#btn_test").text() will give me:
" Speichern & schließen"
I just want to delete the text "" Speichern & schließen", without .replace(...)-function (because the text is dynamic).
I tried $("#btn_test").text(""), but this will clear also my span element.
Thank you.
Updated('possible duplicate'):
Yes, it is the same question like here, but not the answer of Chris Davis, which solved my problem.
Remove the text node, e.g:
$('#btn_test').contents().filter(function(){
return this.nodeType === 3;
}).remove();
Or simpler, if it's always the last:
$('#btn_test').contents().last().remove();
-jsFiddle-
Simplest way would be to wrap your text in a span — it then becomes trivial to remove this text.
$(document).ready(function() {
$('#btn_test .text').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_test">
<span class="glyphicon glyphicon-floppy-disk"
aria-hidden="true"></span>
<span class="text">Speichern & schließen</span>
</button>
jsFiddle link
Related
I'd like to have basic code like the following:
<span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span>
However, I'd like to keep it from firing both of these events if both are being hovered over; e.g. if I hover over "this" it should fire only its event and alert "hello." How can I do this?
Thank you in advance!
$(".container").hover(function(){
alert($(this).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="container" id="hi">
Hello,
</span>
<span class="container" id="hello">
this
</span>
<span class="container" id="hi">
is a test
</span>
I am going to assume that the overlapping elements are not the same size. I.e one is bigger than the other.
HTML and inline js:
<span class="container" id="hi">
Hello,
</span>
<span class="container " id="hello">
this </span>
<script>
var hello =
document.getElementById("hello");
var this =
document.getElementById
("this");
hello.addEventListener("click
",pop("hello"));
this.addEventListener("click",pop(" hi");
function pop(string) {
window.alert(string);
}
<\script>
That being said very little is mentioned about the nature of the elements this and hello. Op plz show your CSS and update ques
Here's the relevant portion of what I ended up using. I used JQuery.
var mouseHovered = function(element) {
//get all hovered spans
var hoveredElements = $("span:hover");
//get the element with the smallest text
var smallestElement;
for(var i=0; i<hoveredElements.length; i++) if(!smallestElement || hoveredElements[i].textContent.length < smallestElement.textContent.length) smallestElement = hoveredElements[i];
//if this is the smallest text in the elements
if(element == smallestElement) {
//log the text
console.log(element.textContent);
}
}
You need to prevent Event bubbling when you hover/click on inner span.
This can be done using event.stopPropagation().
Look at two solutions provided at this JSFiddle.
Solution 1 - Use of e.stopPropagation() in the handler function innerSpan().
Solution 2 - Use of event.stopPropagation() in inline onclick event.
<span onclick="alert('Outer span');">
Outer
<span onclick="event.stopPropagation(); alert('Inner span');">
Inner
</span>
</span>
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>
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?
HI ,
I am using Prototype Javascript for my application .
I am having a Html like
<span style="display: none;">
<span class="fn">
<span class="given-name">NAME</span>
<span class="family-name"> </span>
</span>
<span class="email">email#gmail.com</span>
<span class="tel"></span>
<span class="role">Developer</span>
<a class="underlin" href="/users/username">View</a>
<a class="additional_click" href="">Show Additional Details</a>
<span style="display: none;" class="additional_detail">
Personal Number : 82374894725
</span>
</span>
I am trying a task of when clicking on Show Additional details the span next to that should be displayed and the Innerhtml should be replaced with Hide Additional Details .
And on clicking Hide additional Details , the span (additional_detail) should hide
I have written a Javascript (Prototype) for this
$$(".additional_click").each(function(el){
el.observe("click", function(event) {
event.element().next().show();
el.replace("Hide additional details");
});
});
How to write the Js for on clicking Hide Additional Details to get the span to hide. And to replace the text to Show additional details
In your event function, check if the span was visible. If it was, then hide it and change the text to "Show additional details", and if it wasn't, then show it and change the text to "Hide additional details".
$$(".additional_click").each(function(el) {
el.observe("click", function(event) {
if(el.next().visible())
{
el.next().hide();
el.innerHTML = "Show additional details";
}
else
{
el.innerHTML = "Hide additional details";
el.next().show();
}
Event.stop(event);
});
});
Also remember to stop the event, so that the browser doesn't actually follow the link.