<div id="2" class="dsi" onmousedown="test(2);" ondrop="checkImg('2');dropIt(event,2);" ondragover="event.preventDefault();">
<img src="2.gif" draggable="true" ondragstart="dragIt(event,2);" onmousedown="test(1)" id="pic2" />
</div>
I want to get src of img using javascript. How can I do it ?(i wonto get img id using div id.i mean using div id as 2 then result is pic2.)
If you want to get the src of the image then
var imgSrc= document.getElementById("pic2").src;
Using JavaScript
document.getElementById("pic2").getAttribute("src");
Using Jquery
$("#pic2").attr('src')
For the second question you asked in comment on how do we get in case of a loop.
I am assuming your id are like pic1, pic2, .... , pic9
for (i = 1; i <= 9; i++) {
var picId = 'pic' + i;
document.getElementById(picId).getAttribute("src");
}
var imgSrc= document.getElementById("pic2").src;
Try this code
jQuery method :
var youtubeimgsrc = $('#pic2').attr('src');
javascript method :
var youtubeimgsrc = document.getElementById("pic2").src
Related
i have a variable name value in my javascript code that contain html data.i want to get the data inside form specific id that is inside #myDiv
var value="<div >
<p class="">Hi cname#gmail.com</p>
<br/>
<br/>
<br/>
<div id="myDiv">
sgdhsagdhagh
dhsajdgasj
cjzjcg
</div>
</div>"
Thanks
You should create a DOM element, then traverse up to it and get html() or .text()
var value = '<div >\
<p class="">Hi cname#gmail.com</p>\
<br/>\
<br/>\
<div id="myDiv">\
sgdhsagdhagh\
dhsajdgasj\
cjzjcg\
</div>\
</div>';
alert($(value).find('#myDiv').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you need to get parent element, then use
alert($('<div />', {html: value}).find('#myDiv').html())
How about you do like this?
var variable = "stuff n things";
document.getElementById( 'myDiv' ).innerHTML = variable;
Thats the native way :)
EDIT:
if you want to get the data you just do like this:
var variable = document.getElementById( 'myDiv' ).innerHTML;
That will give you the markup of whats inside the div.
Or use document.querySelector("#myDiv") to get the first match on the selector.querySelectorAll returns array.
You can use the HTML of the value variable to create an jQuery object. From this object you can search for the element with the id, and get its HTML content:
var html = $(value).find('#myDiv').html();
console.log(html); //sgdhsagdhaghdhsajdgasjcjzjcg
Or a pure javascript implementation:
var el = document.createElement('div');
el.innerHTML = value;
var html = el.getElementById('myDiv').innerHTML;
console.log(html); //sgdhsagdhaghdhsajdgasjcjzjcg
Using plain Javascriptuse:
document.getElementById("myDiv").innerHTML;
Using jQuery:
$("#myDiv").html();
There are Two ways- Angular way-
var elem = angular.element(value);
var innerDive=elem[0].getElementById('myDiv');
var text= angular.element(innerDive[0]).innerText;
Jquery-
var text= $(value).find('#myDiv').text();
How can I select html tag after using jquery function called .first() ?
HTML
<html>
<head> </head>
<body>
<div>
<a>
<img id="#hello">
</a>
</div>
<div></div>
</body>
</html>
JS (JQuery)
var elemFirst = $(div).first();
var selectImg = elemFirst.$('img#hello');
// var selectImg = elemFirst.find('img'); <- It working but I want to select manual
selectImg.addClass('some-css');
With Respect
You can use $('child','parent') selector,
var elemFirst = $('div').first();
var selectImg = $('#hello',elemFirst); //or just $('img',elemFirst);
Also, your id has a #, it should be just id="hello".
If you need to keep this value in Id, use
var selectImg = $('img[id="#hello"]',elemFirst);
You can use find():
var selectImg = elemFirst.find('img#hello');
But you have an id of the image, so, you just can do this:
$('img#hello')
Because id is unique.
Use find()
elemFirst.find('img#hello');
This will search for direct and nested elements with the provided selector.
Alternatively, you can do
$('div:first #hello')
or even just
$('#hello')
since you are using an id which should be unique.
As in html the id be unique in html so striaghtly write
$("#\\#hello").addClass('some-css');
or
var selectImg = elemFirst.find('img[id="#hello"]');
Fiddle
I want to get all images src from class '.poi-reviews .poi-review'
however my code is returning only the first image src, always the same first!
what is wrong with my code ?
here it is :
jQuery('.poi-reviews .poi-review').each(function( ) {
var fotos = jQuery('.poi-reviews .author-photo-canvas img').attr('src');
var nome = jQuery('.poi-reviews .review-author-name a').text();
var divImage = "<img id="+nome+" alt="+nome+" height='150 'width='150' src="+ fotos +">" ;
inicio.after(divImage);
});
In jQuery, .each() takes the DOM selection you have made with $("#selection") and iterates over it.
The easiest way to approach this is to have a results array and to push the images' src attributes to it:
JavaScript
var results = [];
$("div > img").each(function () { // selects all img under a div tag and loops through
results.push($(this).attr("src")); // pushes the src attribute of $(this), aka the img,
}) // to the results array
$("#results").text(results.join(", "));
// could also console.log() the results;
// I appended to the DOM so you could easily see it on the fiddle
HTML
<p id="results"></p>
<div>
<img src="http://placekitten.com/200/300" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/300/200" />
</div>
fiddle
That is because there are more than one element so, the attr() call will return the value of only the first element.
You need this:
var fotos = jQuery('.poi-reviews .author-photo-canvas img').map(function() {
return this.src;
}).get();
Now, fotos is a an Array containing the urls. Do what you want with them.
I have HTML like:
<div id='content'>
<div id='price'>$100</div>
<div id='another'>something</div>
</div>
I can get content from id="content" like.
vl = document.getElementById("content").value;
In this id, I have another id="price". But I cannot get directly content from id="price".
How can I get content from id="price" through id='content'.Thank you.
jQuery:
$("#price").text();
javascript:
document.getElementById("price").innerHTML;
DEMO
You can use as below :
vl = document.getElementById("price").innerHTML;
JSFiddle - Check it out
YOu can also use jquery using .html() or .text() method
Try,
$('#content').html().find('#price').html();
Try this,
var parent = document.getElementById('content');
var childNodes = parent.childNodes;
for(var i = 0, len = childNodes.length;i<len;i++){
if(childNodes[i].id === "price") {
alert(childNodes[i].innerHTML);
}
}
Using jquery,
$("#content > #price").text();
You can get value of price directly as :
v2 = document.getElementById("price").value;
using Jquery,
v1= $('#content').html();
v2=v1.find('#price');
v3=v1.find('#another')
Try this out:- http://jsfiddle.net/adiioo7/C3C4x/1/
var price = document.querySelector("#content #price").innerHTML;
console.log(price);
IDs should only be used when there is one of that item on the page. You will have no other chance as to re-assign your IDs, or alternatively using the class attribute.
Try this way to select,
var vl = document.getElementById("content").getElementsByClassName("price")[0];
HTML
<div id='content'>
<div class='price'>$100</div>
<div class='another'>something</div>
</div>
You need to access the child element through parent element... that is your question right.. i solve it with jquery DEMO
$(document).ready(function(){
var tem = $('#content').children('#price').text();
alert(tem);
});
Hello i made a code where i get the last part of the src data and replace _t for empty space like this.
// Get the current image number
var current = $(next.index("img"));
var nextUrl = next.attr("src").replace("_t", "");
This is the img example
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
so in the example case i get this URL
http://farm1.static.flickr.com/28/66523124_b468cf4978
My question is ... I have to modify that code to actually change that at the beginin of the URL
in the Script im working now the thums are
<img id="extra_15" src="data/16/t_15_images.jpg" border="0" width="70px" class="">
And the big images are
<img id="extra_15" src="data/16/15_images.jpg" border="0" width="70px" class="">
how do i change that?
Switch around the pattern you are looking for. Instead of _t do t_.
var nextUrl = next.attr("src").replace("t_", "");