如何在<a>内插入<img>与jQuery？

我正在玩一些JSON数据。通过以下JavaScript，我可以检索一些链接。如何在<a>内插入<img>与jQuery？

(function() { 
 
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
 
    $.getJSON(flickrAPI, { 
 
    id: "[email protected]", 
 
    lang: "en-us", 
 
    format: "json" 
 
    }) 
 
    .done(function(data) { 
 
     $.each(data.items, function(i, item) { 
 
     console.log(data.items[i]['link']); 
 
     if (i === 5) { 
 
      return false; 
 
     } 
 
     }); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

并用以下的JavaScript我可以得到一些图片：

(function() { 
 
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
 
    $.getJSON(flickrAPI, { 
 
    id: "[email protected]", 
 
    lang: "en-us", 
 
    format: "json" 
 
    }) 
 
    .done(function(data) { 
 
     $.each(data.items, function(i, item) { 
 
     $("<img>").attr("src", item.media.m).appendTo("#images"); 
 
     if (i === 5) { 
 
      return false; 
 
     } 
 
     }); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<style> 
 
    img { 
 
    height: 159px; 
 
    float: left; 
 
    margin: 10px; 
 
    } 
 
</style> 
 

 
<div id="images"></div>

好吧，我初学者jQuery的，我曾尝试寻找jQuery中关于这个问题的文档，但没有成功如何实现它。我也尝试过自己做，但徒劳无益。

其实我试图做的是用锚，其href是我从第一个代码中获得的链接内部包装图像。

这两个例子中的代码都是一样的，只有一行。我知道我的预期解决方案也将是一条线合并两条线。

来源

2015-09-27 Santosh Kumar

检出wrap函数（http://api.jquery.com/wrap/），它完全按照它的名称建议。它用任何html包装元素。

检查您的编辑代码，我创建了一个名为link的新变量（创建方法与创建图像的方式相同），并在将图像追加到#images之后，我致电wrap(link)。

我认为这不是一个坚如磐石的解决方案，因为性能的丧失。您可以（也应该）使用字符串创建一个数组，并将其一次全部写入DOM。

(function() { 
 
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
 
    $.getJSON(flickrAPI, { 
 
    id: "[email protected]", 
 
    lang: "en-us", 
 
    format: "json" 
 
    }) 
 
    .done(function(data) { 
 
     $.each(data.items, function(i, item) { 
 
     var image = $("<img>").attr("src", item.media.m) 
 
     var link = $("<a>").attr("href", "//example.org"); 
 
     image.appendTo("#images").wrap(link); 
 
     if (i === 5) { 
 
      return false; 
 
     } 
 
     }); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<style> 
 
    img { 
 
    height: 159px; 
 
    float: left; 
 
    margin: 10px; 
 
    } 
 
</style> 
 

 
<div id="images"></div>

这里是一个更好的解决方案，以节省一些重复：

(function() { 
 
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
 
    $.getJSON(flickrAPI, { 
 
    id: "[email protected]", 
 
    lang: "en-us", 
 
    format: "json" 
 
    }) 
 
    .done(function(data) { 
 
     var imagesHTML = []; 
 
     $.each(data.items, function(i, item) { 
 
     imagesHTML.push([ 
 
      "<a href='" + "http://example.org" + "'>", 
 
       "<img src='" + item.media.m + "'>", 
 
      "</a>" 
 
     ].join("")); 
 
     if (i === 5) { 
 
      return false; 
 
     } 
 
     }); 
 
     $("#images").html(imagesHTML.join("")); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<style> 
 
    img { 
 
    height: 159px; 
 
    float: left; 
 
    margin: 10px; 
 
    } 
 
</style> 
 

 
<div id="images"></div>

这是对DOM的交互减少到最低限度，因为它是一个很好的方式太慢了。在你的情况下，这并不重要，但使用高性能代码通常是一个好习惯。

来源

2015-09-27 19:49:35

很好的答案和解释。 :) –

下面是做这件事的方式：

(function() { 
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
    $.getJSON(flickrAPI, { 
    id: "[email protected]", 
    lang: "en-us", 
    format: "json" 
    }) 
    .done(function(data) { 
     $.each(data.items, function(i, item) { 
     var html = '<a href="'+ item.media.m +'"><img src="'+ item.media.m +'"/></a>'; 
     $(html).appendTo("#images"); 
     if (i === 5) { 
      return false; 
     } 
     }); 
    }); 
})();

你可以只形成一个字符串的HTML，并将它传递给jQuery的。

来源

2015-09-27 19:45:32

很好的答案，但一个解释是有用的有史以来 –

$.each(data.items, function(i, item) { 
    var img = $("<img>").attr("src", item.media.m); 
    var a= $("<a>").attr("href", item.media.m); 
    img.appendTo(a); 
    a.appendTo("#images"); 
    if (i === 5) { 
     return false; 
    } 
    });

在href的结果中查找正确的值。

来源

2015-09-27 19:46:59 Alqin

你可以使用.append（）吗？

.done(function(data) { 
    $.each(data.items, function(i, item) { 
    $("#images").append('<a href="###YOURLINKHERE###"><img src="' + item.media.m + '" /></a>'; 
    if (i === 5) { 
     return false; 
    } 
    }); 
});

来源

2015-09-27 19:50:04

如何在<a>内插入<img>与jQuery？

回答

相关问题