Question

下面的代码应该用图片包装，但它并没有被包裹起来。可能是因为我使用了getJSOndata？

   <!DOCTYPE html>
    <html>
    <head>
        <title>Working With JSON</title>
        <style>
        #content {
          padding: 5pt;
          border: 2px dashed lightgray;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
          $("document").ready(function() {
            getJSONData();
            addDIV();
            jQuery('img', '#content').attr("alt","noddy");        
          });

征集图片。

        function getJSONData() {
        var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
        $.getJSON( flickrAPI, {
              tags: "space needle",
              tagmode: "any",
              format: "json"
              },
            successFn);
          }

为图片创建HTML。

          function successFn(result) {
            $.each(result.items, function(i, item) {
             $("<img>").attr({"src":item.media.m, "alt":"gallery"}).appendTo("#content");
            if (i === 4) {
              return false;
             }
           });
          }

以下是问题的说明我可以为父（div）添加标签但我不能给孩子添加标签。

          function addDIV () {
            // put each image within it's own div
            // select all images 
            // this works
            $('#content').wrap("<DIV></DIV>");
            // this doesn't work
            $('#content img').wrap("<DIV></DIV>");
            // Why ???
            }
      </script>
    </head>
    <body>
    <h1>Working With Different Data Types</h1>
    <div id="content"></div>
    </body>
    </html>

Answer 1

您应该在回调函数 successFn 中运行 addDIV 函数：

function successFn(result) {
    $.each(result.items, function(i, item) {
        $("<img>").attr({"src":item.media.m, "alt":"gallery"}).appendTo("#content");
        if (i === 4) {
           return false;
        }
    });
    addDiv();
}

请记住，您使用默认情况下异步的Ajax请求，这意味着即使回调响应尚未执行，Javascript执行仍会继续，在下面的代码中， addDiv（）将在回调 successFn（）之前执行。

$("document").ready(function() {
    getJSONData();
    addDIV();
    jQuery('img', '#content').attr("alt","noddy");        
});

jquery转换在父级别下失败。为什么？我该怎么办？

1 个答案: