两个Feed合并为一个
Two Feeds combined into one
所以,我有一个基于Materialize CSS的网站。MaterializeCSS是一个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视频源。它需要以正确的时间顺序显示在相同的两列中,两个提要混合显示。
我怎么可能这么做?
首先使用$.when
组合两个数据流。
对$.ajax
的调用返回所谓的Promises或Deferred对象。不是提供一个成功函数,而是从$.ajax
调用链接一个done
方法。
$.ajax({
type: "GET",
url: "http://www.foxinflame.tk/blog/feed/",
dataType: "xml"
}).done(function(xml) {
// do stuff with xml
});
可以将两种功能结合起来
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)
});
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 使用类从一个标记中双击事件
- Javascript,访问一个主要对象模块模式中的每个对象
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 两个Feed合并为一个
- 使用Feed对话框和Javascript API在另一个用户的墙上发布