There are many class="item" blocks on the page.
For each one there is different var item_link and ajax request.
Ajax searches for src attribute of .message img and throws it to var src.
$(".item").each(function(){
var item_link = "http://...";
$(this).prepend('<div class="src"></div>');
$.get(item_link, function(data) {
var src = $('.message img', data).attr('src');
});
});
How to print var src to <div class="src"></div>?
Thanks.
This should do it:
$(".item").each(function(){
var item_link = "http://...";
$.get(item_link, $.proxy(function(data) {
var src = $('.message img', data).attr('src');
$(this).prepend('<div class="src">' + src + '</div>');
}, this));
});
jAndy's approach should work, but it waits to add the div until the GET completes (which should be fine). If it's really important that you put the div in place before doing the GET, though, you could do this:
$(".item").each(function(){
var item_link = "http://...";
var item_div = $('<div class="src"></div>');
$(this).prepend(item_div);
$.get(item_link, function(data) {
var src = $('.message img', data).attr('src');
item_div.text(src);
});
});
That uses item_div.text(), which will show the value from src. If src has HTML tags and you want them to be rendered, use item_div.html() instead.
Edit: Update after your "doesn't work" comment:
The part you asked about, setting the text of the div, works fine. I think the problem is that your code is assuming that the data coming back from the ajax call will be a DOM element. It won't, it'll be a string until you insert it into the DOM somewhere (jQuery doesn't turn HTML into DOM objects proactively).
This version handles that:
$(".item").each(function(){
var item_link = "http://...";
var item_div = $('<div class="src"></div>');
$(this).prepend(item_div);
$.get(item_link, function(data) {
var img = $(data).find('.message img'); // <== Make a DOM element,
// look for images in
// .message containers
var src = img.attr('src');
item_div.text(src);
});
});
Working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnGo').click(go);
}
function go() {
$(".item").each(function(index){
var item_link = "tempserver.jsp?index=" + index;
var item_div = $('<div class="src"></div>');
$(this).prepend(item_div);
$.get(item_link, function(data) {
var img = $(data).find('.message img');
var src = img.attr('src');
item_div.text(src);
});
});
}
})();
</script>
</head>
<body>
<input type='button' id='btnGo' value='Go'>
<div>
<div class='item'>Item 1</div>
<div class='item'>Item 2</div>
<div class='item'>Item 3</div>
<div class='item'>Item 4</div>
</div>
</body>
</html>
tempserver.jsp:
<div>
<div class='message'><img src='image<%=request.getParameter("index")%>.png'></div>
</div>