如何使用ajax从所有帖子中获取第一个图像

How get first image from all posts with ajax

本文关键字：获取 第一个 图像 何使用 ajax      更新时间：2023-09-26

我有这样的代码，它只为第一篇文章吐出所有内容。我希望它能吐出所有帖子中的第一张图片。

$.ajax({url: "http://api.tumblr.com/v2/blog/sjtest1.tumblr.com/posts?api_key=mykey",
    dataType: 'jsonp',
    success: function(results){
        console.log(results); 
        var postBody = results.response.posts[0].body;
        $(".x").html(postBody); 
    }});

这是一个ajax响应：

 {
   "meta": {
      "status": 200,
      "msg": "OK"
   },
   "response": {
      "blog": { ... },
      "posts": [
         {
            "blog_name": "citriccomics",
            "id": 3507845453,
            "post_url": "http:'/'/citriccomics.tumblr.com'/post'/3507845453",
            "type": "text",
            "date": "2011-02-25 20:27:00 GMT",
            "timestamp": 1298665620,
            "state": "published",
            "format": "html",
            "reblog_key": "b0baQtsl",
            "tags": [
               "tumblrize",
               "milky dog",
               "mini comic"
            ],
            "note_count": 14,
            "title": "Milky Dog",
            "body": "<p><img src='"http:'/'/media.tumblr.com'
               /tumblr_lh6x8d7LBB1qa6gy3.jpg'"'/><a href='"http:'/'
               /citriccomics.com'/blog'/?p=487'" target='"_blank'">TO READ
               THE REST CLICK HERE<'/a><br'/>'n'nMilky Dog was inspired by
               something <a href='"http:'/'/gunadie.com'/naomi'"
               target='"_blank'">Naomi Gee<'/a> wrote on twitter, I really
               liked the hash tag <a href='"http:'/'/twitter.com'/
               search?q=%23MILKYDOG'" target='"_blank'">#milkydog<'/a>
               and quickly came up with a little comic about it. You can
               (and should) follow Naomi on twitter <a href='"http:'/'
               /twitter.com'/ngun'" target='"_blank'">@ngun<'/a> I'm on
               twitter as well <a href='"http:'/'/twitter.com'
               /weflewairplanes'"target='"_blank'">@weflewairplanes<'/a>
               <'/p>'n'nAlso, if you’re a Reddit user (or even if
               you're not) I submitted this there, if you could up vote
               it I'd be super grateful just <a href='"http:'/'
               /tinyurl.com'/5wj3tqz'" target='"_blank'">CLICK HERE<'/a>"
         },
         ...
      ],
      "total_posts": 3
   }
}

正如您所看到的，身体中的图像被

标签包裹。我是如何获得图像的？

使用jQuery，查看示例代码：

$(results.response.posts[0].body).find('img').first();

这可能不是最好的选择，但它应该这样做。如果你想为多个帖子做这件事，请使用图像阵列：

var img = new Array();
$.each(results.response.posts, function (ix,el){
img.push($(el.body).find('img').first());
})

试试这个：

$.ajax({url: "http://api.tumblr.com/v2/blog/sjtest1.tumblr.com/posts?api_key=mykey",
    dataType: 'jsonp',
    success: function(results){
        console.log(results); 
        var postBody = results.response.posts[0].body;
        var html = $(postBody);
        var firstImage = $(postBody).find("img:first");
    }});

var $ct = $('.x');
$.ajax({
    url: "http://api.tumblr.com/v2/blog/sjtest1.tumblr.com/posts?api_key=mykey",
    dataType: 'jsonp',
    success: function (results) {
        console.log(results);
        $.each(results.response.posts, function (_, post) {
            $(post.body).find('img:first').appendTo($ct)
        })
    }
});
相关文章：