有很多class="item"页面上的 block 。
对于每一个都有不同的 var item_link和ajax请求。
Ajax 搜索 src .message img 的属性并将其扔给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');
});
});
如何打印var src至<div class="src"></div> ？
谢谢。
最佳答案
jAndy's approach应该可以工作，但它会等待 GET 完成才添加 div(这应该没问题)。不过，如果在执行 GET 之前将 div 放置到位确实很重要，您可以这样做:
$(".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 的文本，工作正常。我认为问题在于您的代码假设从 ajax 调用返回的 data 将是 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>
关于jQuery 获取属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3053295/