I have a span tag like this and stored in the variable "foo"
<span class="right margin">
سی ئی 1500
<br>
Nicole Kidman
</span>
Using jQuery OR javascript, how can I change the "Nicole Kidman" clause with something I want? innerHTML changes everything in the <span>
Edit: I edited the text with this code foo[0].lastChild.nodeValue="something else"; but is there another way doing that using only jQuery?
I recommend you add another span tag around Nicole Kidman.
<span class="right margin">
سی ئی 1500
<br>
<span>Nicole Kidman</span>
</span>
and change the text like this:
$(".right").find("span").text("something you want");
<span> is an inline element. We avoid using <br/> in them.
It is also advisable to use another tag to encapsulate your 'Nicole Kidman' text.(Like another <span>)
I'm not aware of your entire HTML structure so I'm going with what you have posted. Here is a fiddle example for how it can be done.
Here the foo is not a jQuery object:
foo.lastChild.textContent='something you want'
So the foo is a jQuery object, but you still need to access the dom element directly:
foo.contents().eq(-1).textContent='something you want'
Related
I have this code:
<p id = 'drop1' style='color:#008cba; background-color:#fffF00;'
onmouseover="show()" onmouseout="hide()" title="See more">
Hi, my name is text 1.
</p>
that works.
But, I'd like to write it in jQuery. I tried:
<p id = 'drop2' style='color:#008cba; background-color:#fffF00;'
$(this).attr('See more')>
Hi, my name is text 2.
</p>
Doesn't work.
Is there a way to write a jQuery only inline form?
You shouldn't be putting code inline with HTML elements in general. It's just as easy to incorporate a script element and a proper event handler. However, I suspect that this is what you're after:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="drop2" style="color: #008cba; background-color: #fffF00;"
onmouseover="$(this).text('See more')"
onmouseout="$(this).text('Hi, my name is text 2')">
Hi, my name is text 2
</p>
The reason your example doesn't work is because jQuery's attr() method, when passed a single argument, attempts to retrieve the value of that attribute. There's no such attribute in your HTML.
I have
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: </span><i **FROM HERE**>'.$wiersz['likes'].'</i><i>'.$wiersz['unlikes'].'</i></div>';
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: <i>Thank you</i></span><i **OVERHERE**>'.$wiersz['likes'].'</i> <i>'.$wiersz['unlikes'].'</i></div>';
How Can I go FROM (FROM HERE) to the (OVER HERE) by selectors in jQuery?
I'm hiding first div and showing second div. I need to increase innerText of OVERHERE but I dont know how to go there by selectors.
I did:
$(this).parent().next()
this lead me to second div but still cant go into OVERHERE in second div.
try this..
$(this).parent().next().children()[2]
Assuming this is how the rendered HTML looks like
<div>
<span>data<i> added by: username</i></span>
<span>Rate: </span>
<i onclick="$(this).closest('div').next().find('i').eq(2).text(parseInt($(this).text(),10))">25 Likes</i>
<i>unlikes</i>
</div>
<div>
<span>data<i> added by: username</i></span>
<span>Rate: <i>Thank you</i></span><i>Will be overwritten </i> <i>unlikes</i>
</div>
Or $(this).parent().next() instead. However closest is safer in case you wrap your <i> in something
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>
This is my code, how to get the content inside the paragraph tag. [The tag may change to div or ul]. I need all the content inside the paragraph tag by javascript.
The output should be :
First Text Second Text
Sorry I am new to javascript, searched but cant find answer for this relevant problem. Thanks
To get the value of a tag, you can get the element with a selector and use innerHTML to get the value. like this:
<p>hi there</p>
console.log(document.getElementsByTagName('p')[0].innerHTML);
n.b. in the code above it's selecting by tag name, so it returns an array of matching elements
So in your example, using .innerHTML with give you the P tags content, including any html tags etc.
if you want just the content, you can use .textContent
console.log(document.getElementsByTagName('p')[0].textContent);
This wont give you the inner html tags
n.b. there is also the innerText method, However this isnt supported accross browsers.
You can change according to the tag you need, but basically this will do the trick:
document.getElementsByTagName('p')[0].innerText
Fiddle
InnerText should be a good solution.
console.log(document.getElementsByTagName('p')[0].innerText);
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>
I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>
It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')
First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.
Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')
You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>
As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')
So my html code is:
<div class="product-details">
<div class="availability in-stock">
Availability: <span>In stock</span>
</div>
</div>
I would like to use Jquery to change the span value of "in stock". I am somewhat new to Javascript and Jquery, so how would I change that span value without it having an id to reference.
Many thanks in advance!
$('.in-stock span').html("your new string");
http://jsfiddle.net/hQqtU/
$('.product-details .availability span').text('foo');
Fiddle: http://jsfiddle.net/maniator/EryVF/
What you are looking for is either the text() or the html() like so:
$('.availability span').html('This is what you want to change it to');
Here is an example: JsFiddle Demo