Question

我使用博客作为我的博客平台。在我的博客主页中，当我的帖子里面包含多个图片时，我想使用滑块作为我的帖子缩略图。所以，我在所有帖子中创建了一个JSON请求，结果如下所示：

// API callback
extract({
    "version": "1.0",
    "encoding": "UTF-8",
    "entry": {
        "xmlns": "http://www.w3.org/2005/Atom",
        "xmlns$blogger": "http://schemas.google.com/blogger/2008",
        "xmlns$georss": "http://www.georss.org/georss",
        "xmlns$gd": "http://schemas.google.com/g/2005",
        "xmlns$thr": "http://purl.org/syndication/thread/1.0",
        "id": {
            "$t": "tag:blogger.com,1999:blog-8885963640212113245.post-2877822832429210498"
        },
        "published": {
            "$t": "2014-10-23T21:36:00.004+07:00"
        },
        "updated": {
            "$t": "2014-10-24T21:21:43.914+07:00"
        },
        "category": [{
            "scheme": "http://www.blogger.com/atom/ns#",
            "term": "Flat Design"
        }, {
            "scheme": "http://www.blogger.com/atom/ns#",
            "term": "Service"
        }],
        "title": {
            "type": "text",
            "$t": "Blloon"
        },
        "content": {
            "type": "html",
            "$t": "<div class=\"separator\" style=\"clear: both; text-align: center;\"><a href=\"http:\/\/1.bp.blogspot.com\/-JChWOcR1GAo\/VEkIUDSmAbI\/AAAAAAAAAZI\/VGvhCLn9oKs\/s1600\/blloon.com-Blloon.jpeg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-JChWOcR1GAo\/VEkIUDSmAbI\/AAAAAAAAAZI\/VGvhCLn9oKs\/s1600\/blloon.com-Blloon.jpeg\" \/><\/a><\/div><br \/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quae laboriosam quidem quod, adipisci omnis nostrum blanditiis porro quam quisquam veritatis accusantium qui cumque commodi sequi fugiat consectetur nulla, illum!<br \/><br \/><div class=\"separator\" style=\"clear: both; text-align: center;\"><a href=\"http:\/\/1.bp.blogspot.com\/-DL28zkUj9a8\/VEkIPR8tV3I\/AAAAAAAAAZE\/46ozW-aOJiw\/s1600\/chileda.org-Chileda%2B%2B%2BHelping%2Bchildren%2Bwith%2Bcognitive%2Band%2Bbehavioral%2Bchallenges.jpeg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-DL28zkUj9a8\/VEkIPR8tV3I\/AAAAAAAAAZE\/46ozW-aOJiw\/s1600\/chileda.org-Chileda%2B%2B%2BHelping%2Bchildren%2Bwith%2Bcognitive%2Band%2Bbehavioral%2Bchallenges.jpeg\" \/><\/a><\/div><br \/><div class=\"separator\" style=\"clear: both; text-align: center;\"><a href=\"http:\/\/3.bp.blogspot.com\/-NUAqgePVawo\/VEkJdF-KVHI\/AAAAAAAAAZk\/4WaAtc-pvzc\/s1600\/lamassu.is-Bitcoin%2BATM%2BMachine%2B%2B%2BLamassu.jpeg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-NUAqgePVawo\/VEkJdF-KVHI\/AAAAAAAAAZk\/4WaAtc-pvzc\/s1600\/lamassu.is-Bitcoin%2BATM%2BMachine%2B%2B%2BLamassu.jpeg\" \/><\/a><\/div><br \/>"
        },
    }
});

这是我的第一篇文章，里面有三个图片标签。

然后这是我的第二篇文章，里面有两个图片标签。

// API callback
extract({
    "version": "1.0",
    "encoding": "UTF-8",
    "entry": {
        "xmlns": "http://www.w3.org/2005/Atom",
        "xmlns$blogger": "http://schemas.google.com/blogger/2008",
        "xmlns$georss": "http://www.georss.org/georss",
        "xmlns$gd": "http://schemas.google.com/g/2005",
        "xmlns$thr": "http://purl.org/syndication/thread/1.0",
        "id": {
            "$t": "tag:blogger.com,1999:blog-8885963640212113245.post-7814577047467078813"
        },
        "published": {
            "$t": "2014-10-23T21:35:00.000+07:00"
        },
        "updated": {
            "$t": "2014-10-24T21:31:22.546+07:00"
        },
        "category": [{
            "scheme": "http://www.blogger.com/atom/ns#",
            "term": "Charity"
        }, {
            "scheme": "http://www.blogger.com/atom/ns#",
            "term": "Flat Design"
        }],
        "title": {
            "type": "text",
            "$t": "Chileda"
        },
        "content": {
            "type": "html",
            "$t": "<div class=\"separator\" style=\"clear: both; text-align: center;\"><a href=\"http:\/\/4.bp.blogspot.com\/-DL28zkUj9a8\/VEkIPR8tV3I\/AAAAAAAAAZA\/-PXPTZweu-w\/s1600\/chileda.org-Chileda%2B%2B%2BHelping%2Bchildren%2Bwith%2Bcognitive%2Band%2Bbehavioral%2Bchallenges.jpeg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-DL28zkUj9a8\/VEkIPR8tV3I\/AAAAAAAAAZA\/-PXPTZweu-w\/s1600\/chileda.org-Chileda%2B%2B%2BHelping%2Bchildren%2Bwith%2Bcognitive%2Band%2Bbehavioral%2Bchallenges.jpeg\" \/><\/a><\/div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quae laboriosam quidem quod, adipisci omnis nostrum blanditiis porro quam quisquam veritatis accusantium qui cumque commodi sequi fugiat consectetur nulla, illum!<br \/><br \/><div class=\"separator\" style=\"clear: both; text-align: center;\"><a href=\"http:\/\/1.bp.blogspot.com\/-AUGcmEviNdw\/VEkKUJ9dY_I\/AAAAAAAAAZ8\/hjuKmp0x6j4\/s1600\/www.educreations.com-Educreations.jpeg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-AUGcmEviNdw\/VEkKUJ9dY_I\/AAAAAAAAAZ8\/hjuKmp0x6j4\/s1600\/www.educreations.com-Educreations.jpeg\" \/><\/a><\/div><br \/>"
        },
    }
});

要安装滑块，我计划使用flexslider，flexslider标记如下所示：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

问题是，我如何从JSON请求中提取图像源，然后将其附加到flexslider标记？我对javascript有点了解，但不太专业。一个jsFiddle的例子对我很有帮助（但不是必需的）。

Answer 1

试试这个：

extract = function(json){
    var html = $(json.entry.content.$t);
    html.find("img").each( function(){
       $(".flexslider .slides").append($("<li>").append(this));
    });    

    $('.flexslider').flexslider({
    animation: "slide",
    });
}

$(window).ready(function() {

    $.ajax({
        url: "http://www.prowebinspire.com/feeds/posts/default/2877822832429210498?alt=json-in-script&callback=extract",
        dataType: "jsonp"
    });
});

请在此处查看：JSFiddle

更新：添加了ajax-request和flexslider（）。更新了小提琴：JSFiddle

Answer 2

假设您的json存储在名为data的变量（ajax请求之后的）中，那么

data.entry.content.$t

指的是该帖子的实际html字符串。

您可以创建一个内存中元素并将该HTML插入其中，以便您可以使用jQuery DOM遍历方法开始解析它。

var dummy = $('<div/>', { html = data.entry.content.$t }),
    images = dummy.find('img');

要在滑块中插入（，如果flexslider使用动态附加内容），请执行

images.each(function(){
  $('<li/>', {html: this}).appendTo('.flexslider .slides');
});

从JSON请求中提取img src

2 个答案: