2010-06-16 6 views
2

Il existe de nombreux blocs class="item" sur la page.jQuery get attribut

Pour chacun d'eux, il y a différentes demandes var item_link et ajax.

Ajax recherche src attribut de .message img et le jette à 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'); 
    }); 
}); 

Comment imprimer var src-<div class="src"></div>?

Merci.

Répondre

3

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> 
+0

cela ne fonctionne pas trop – Happy

+0

@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é. –

1

Cela devrait le faire:

$(".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)); 
}); 
+0

@ T.J. Crowder: en effet, je vais supprimer la première partie – jAndy

+0

cette solution ne donne rien, div.src ne crée pas – Happy

+0

div.src doit être original pour chaque .item – Happy