Подход jAndy должен работать, но он ожидает добавления div, пока не завершится GET (что должно быть хорошо).Если действительно важно поместить div на место перед выполнением GET, вы можете сделать это:
$(".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);
});
});
, использующий item_div.text(), который покажет значение от src.Если src имеет HTML-теги и вы хотите, чтобы они отображались, используйте item_div.html().
Редактировать : обновить после того, как ваш комментарий «не работает»:
Часть, о которой вы спрашивали, настройка текста div, работает нормально.Я думаю, проблема в том, что ваш код предполагает, что data, возвращающийся из вызова ajax, будет элементом DOM.Это не так, это будет строка, пока вы не вставите ее где-нибудь в DOM (jQuery не превращает HTML в объекты DOM с упреждением).
Эта версия обрабатывает следующее:
$(".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);
});
});
Рабочий пример:
<!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>