2014-04-28 31 views
0

下面的代碼應該包裝圖像,但它不,我很難過。難道是因爲我用過getJoomndata嗎?jquery轉換失敗低於父級別。爲什麼?我該怎麼辦?

<!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> 

回答

1

您應該運行在回調函數內addDIV功能successFn

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