Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 两条馈线合二为一_Javascript_Html_Feed - Fatal编程技术网

Javascript 两条馈线合二为一

Javascript 两条馈线合二为一,javascript,html,feed,Javascript,Html,Feed,所以,我有一个基于CSS的物化网站。 物化CSS是一个CSS库,可在此处获得 现在,我设法将我的博客提要显示为两列,第一行向下,第二行如下 ------------------------ Newest | 4th Newest 2nd Newest | 5th Newest 3rd Newest | 6th Newest ------------------------ 这是上面的代码中使用的代码 <div class="row"> <div id="first

所以,我有一个基于CSS的物化网站。 物化CSS是一个CSS库,可在此处获得

现在,我设法将我的博客提要显示为两列,第一行向下,第二行如下

------------------------
Newest     | 4th Newest
2nd Newest | 5th Newest
3rd Newest | 6th Newest
------------------------
这是上面的代码中使用的代码

<div class="row">
  <div id="firstColumnBlog" class="col s6"></div>
  <div id="secondColumnBlog" class="col s6"></div>
</div>
<script>
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "http://www.foxinflame.tk/blog/feed/",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("item").each(function (eachCounter) {
                var title = $(this).find("title").text();
                var description = $(this).find("description").text();
                var comments = +($(this).find("slash:comments").text());
                var pubDate = $(this).find("pubDate").text();
                var link = $(this).find("link").text();
                if(eachCounter < 3){
                  $("#firstColumnBlog").append("<div class='postCollection'><div class='z-depth-1 blogpost' style='min-height: 300px'><br><h5><a style='color:black' href='"+link+"'>"+title+"</a></h5><br><p>"+description+"<br><i>"+comments+" Comments. Published at "+pubDate+"</i></p></div></div>");
                } else if(eachCounter < 6) {
                  $("#secondColumnBlog").append("<div class='postCollection'><div class='z-depth-1 blogpost' style='min-height: 300px'><br><h5><a style='color:black' href='"+link+"'>"+title+"</a></h5><p>"+description+"<br><i>"+comments+" Comments. Published at "+pubDate+"</i></p></div></div>");
                }
            });
        }
    });
  })
</script>
现在,我想添加另一个提要,与当前提要一起显示。比方说,YouTube视频源。它需要以正确的时间顺序显示在相同的两列中,同时混合两个提要


我应该如何做到这一点呢?

首先,使用

对$.ajax的调用返回所谓的承诺或对象。您没有提供成功函数,而是从$.ajax调用链接一个done方法

可以将两个

var blogFeed  = $.ajax({ /* some settings */ });
var videoFeed = $.ajax({ /* some other settings */ });

$.when(blogFeed, videoFeed)
  .done(function(blogXML, videoXML) {
    // this will be called when both AJAX requests are successful
  });
当您达到这一点时,您可以简单地将这两个提要组合起来,并使用自定义排序函数对它们进行排序

var combined = blogXML.find('item').concat(videoXML.find('item'));

var sorted = combined.sort(function(a, b) {
  // not all date formats can be compared like this
  // but I don't know what format your dates are in
  var dateA = Date.parse(a.find('pubDate'));
  var dateB = Date.parse(b.find('pubDate'));
  return dateB - dateA;
});

sorted.forEach(function(item, index) {
  // do something with each item
  // (this will probably involve inserting them into the DOM)
});

看起来这样行得通。但是,如果视频XML使用标记,我会更改第三个代码段上的第一行,以查找条目标记而不是条目,对吗?确切地说,无论您需要做什么,都可以获取条目列表。哦,不。但是对于YouTube,它会获取视频的作者和URL,然后输入以获取视频名称和描述。是否只是查找“媒体:组”?可能,您希望在您关心从中获取数据的标记之外找到第一个标记。我的约会对象不同。我的博客提要显示如下:Wed,2015年10月21日16:09:00+0000,而我的视频提要显示如下:2015-11-05T21:00:03+00:00。我会用正则表达式吗,那怎么用呢?我认为这可能是一个不同的话题。但只是一个提示,或者一个完整的答案。看在我的份上。请
var combined = blogXML.find('item').concat(videoXML.find('item'));

var sorted = combined.sort(function(a, b) {
  // not all date formats can be compared like this
  // but I don't know what format your dates are in
  var dateA = Date.parse(a.find('pubDate'));
  var dateB = Date.parse(b.find('pubDate'));
  return dateB - dateA;
});

sorted.forEach(function(item, index) {
  // do something with each item
  // (this will probably involve inserting them into the DOM)
});