Question

页面上有许多class="item"块。

对于每一个，都有不同的var item_link和ajax请求。

Ajax搜索src的{{1}}属性并将其投放到.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？

感谢。

Answer 1

jAndy's approach应该可以工作，但它等待添加div直到GET完成（应该没问题）。但是，如果在执行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的文本，工作正常。我认为问题是你的代码假设从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>

Answer 2

这应该这样做：

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

jQuery获取属性

2 个答案: