I've got a image inside a div. Below is the current div structure.
<div id="imgHolder">
<img class="smallthumb" src="imgHolder.png">
</div>
How can I call the image using jquery and get the same output as above?
I tried this:
$('#imgHolder').attr("src", "profile.png");
but then the final output is:
<div id="imgHolder" class="smallthumb" src="imgHolder.png"></div>
imgHolder is the ID of the div element so #imgHolder will refer to the div element that is why the src is getting added to the div element.
You need to find the image inside the div so you can use a descendant selector along with the id selector like
$('#imgHolder img').attr("src", "profile.png");
$('button').click(function() {
$('#imgHolder img').attr("src", "//placehold.it/64X64&text=profile");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imgHolder">
<img class="smallthumb" src="//placehold.it/64X64&text=holder">
</div>
<button>Change</button>
You need to select the img to change the attribute of img.
$('#imgHolder img').attr("src", "profile.png");
As img is the direct child of div, you can also use the children > selector
$('#imgHolder>img').attr("src", "profile.png");
Demo
$('#imgHolder > img').attr('src', 'profile.png');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="imgHolder">
<img class="smallthumb" src="imgHolder.png">
</div>
Update
If you want to add image dynamically:
$('#imgHolder').html('<img src="http://img42.com/kzCbY+" />');
Demo
You can use .find to find any descendants like so :
$('#imgHolder').find('img').attr("src", "profile.png");
Related
How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?
If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";
Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'
If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]
Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');
First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";
I want to add id="draggable" attributes to all tags.
For example -
<img src="http://sample.jpg"> should change to <img src="http://sample.jpg" id="draggable" >
<p>abcd</p> should change to <p id="draggable">abcd</p>
This should apply to all tags except <HTML><HEAD><script><style>
Any suggestion?
Use class instead of Ids
var elems = document.body.getElementsByTagName("*");
elems.setAttribute("class","draggable");
ID(s):
Each element should only have one ID
Each page can only have one element with that ID
CLass(s):
You can use mutliple classes on one element.
You can use the same class on multiple elements
Adding same id to all the HTML elements is not a good way. Better to have same class name. Dynamically, if you want to add same class to all the elements, you can do something like below
$('#parent').find('*').addClass('draggable');
http://jsfiddle.net/663m8qyd/
<div id='parent'>
<p>ABC</p>
<img src='http://www.w3schools.com/tags/smiley.gif' alt="Smiley face"/>
<div id='child'>
<div id='child1'>test1</div>
<div id='child2'>test2</div>
</div>
</div>
To add draggable class to all the elements inside parent div, find each element and add respective class.
Hope that helps!
I am working on the following code. I want to find out why I am not able to target the <img> tag which only has the "award logos" alt
<img src="http://www.....jpg" alt="award logos">
<img src="http://www.....jpg" alt="Ranking">
<script>
$(document).ready(function() {
$('img [alt="award logos"]').wrap("<a href='http://google.com' </a>");
});
</script>
Technically, what I want to do is targeting all the images that has the specific alt attributes.
Remove space between img and [alt="award logos"] because of the space it is looking for child element of img with attribute [alt="award logos"].
$(document).ready(function() {
$('img[alt="award logos"]').wrap("<a href='http://google.com'> </a>");
});
NOTE - you missed > for a (anchor) tag while wrapping img, please correct it.
JSFiddle Demo
I have a root div element and inside that div i have an image.
<div id="root">
<img id="msg"/>
</div>
Now using jquery i used to prepend n number of div elements inside that root div. The issue is that the new div elements come before the img tag. . like
<div id="root">
<div id="b"></div>
<div id="a"></div>
<img id="msg"/>
</div>
But I need it to prepended div elements to appear after the img tag like
<div id="root">
<img id="msg"/>
<div id="b"></div>
<div id="a"></div>
</div>
Any suggestions as to how I can achieve this using jQuery?
Try:
$("your html").insertAfter($("#msg"));
Like this maybe:
$("#msg").after();
Simply use the append method instead of prepend like this:
$('#root').append('<div>Div N</div>')
Here is the working example in JSFiddle.
And here is the documentation on jQuery's append method.
Use append() instead of prepend():
append() method add div after first div
prepend() method add div before first div.
Try
var newDiv = $("<div>test</div>");
$('img').after(newDiv);
I have this HTML structure:
<div class="fullNews">
<div class="mainText">
<img src="/contentthumbs/news-16_thumb.jpg">
<img src="/contentthumbs/news-17_thumb.jpg">
<img src="/contentthumbs/news-18_thumb.jpg">
<img src="/contentthumbs/news-19_thumb.jpg">
</div>
</div>
<div class="fullNews">
<div class="mainText">
<img src="/contentthumbs/news-20_thumb.jpg">
<img src="/contentthumbs/news-21_thumb.jpg">
<img src="/contentthumbs/news-22_thumb.jpg">
<img src="/contentthumbs/news-23_thumb.jpg">
</div>
</div>
I am trying to apply a CSS class to only the first hyperlinks of each lot of parent divs through JQuery:
$('.mainText a:first').addClass('mainPhoto');
But it only adds the class to the first hyperlink of the first div group. I need that all the first hyperlinks of each <div class="mainText"> get the class, in this example:
<a href="news-16.jpg">
<a href="news-20.jpg">
Thanks in advance
Why jQuery? use pure CSS:
.mainText a:first-child {
<your properties>
}
About your jQuery error:
you have used :first that is not a CSS selector but a jQuery selector, that matches only the first matching element.
You should instead use :first-child that is a CSS selector and will select each first-children matched.
Use first-child Selector, it selects all elements that are the first child of their parent. While :first matches only a single element
$('.mainText a:first-child').addClass('mainPhoto');
DEMO
In case of you want to do it with only javascript, then use this code.
var allDivs = document.getElementsByClassName("mainText");
for(var i=0; i<allDivs.length; i++){
//firstElementChild referes the first element of div
allDivs[i].firstElementChild.className = 'mainPhoto';
}
Demo you can on http://jsfiddle.net/7DS5F/19/