jAndy's approach devrait fonctionner, mais il attend d'ajouter le div jusqu'à ce que GET
finalise (qui devrait être bien). S'il est vraiment important que vous mettez le div en place avant de faire le GET
, cependant, vous pouvez le faire:
$(".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);
});
});
qui utilise le item_div.text()
, qui indique la valeur de src
. Si src
contient des balises HTML et que vous souhaitez qu'elles soient affichées, utilisez plutôt item_div.html()
.
Modifier: Mise à jour après votre « ne fonctionne pas » commentaire:
La partie vous a demandé, la définition du texte de la div, fonctionne très bien. Je pense que le problème est que votre code suppose que le data
qui revient de l'appel ajax
sera un élément DOM. Ce ne sera pas le cas, ce sera une chaîne jusqu'à ce que vous l'insériez quelque part dans le DOM (jQuery ne transforme pas le HTML en objets DOM de façon proactive).
Cette version gère que:
$(".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);
});
});
Exemple de travail:
<!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>
cela ne fonctionne pas trop – Happy
@Happy: Juste fait une modification, le problème n'est pas dans la partie que je pensais que vous demandiez, mais je pense que je l'ai trouvé. –