Question

我想循环浏览两个（可能更多的未来）RSS-feeds并将它们放在不同的容器div中。我开始关注这个问题：JQuery Fetch Multiple RSS feeds。

这是我的代码。

    var thehtml = '';

    $(function () {
    var urls = ['http://www.gosugamers.net/counterstrike/news/rss', 'http://www.hltv.org/news.rss.php'];
    for (var i = 0; i < urls.length; i++) {
        $.ajax({
            type: "GET",
            url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(urls[i]),
            dataType: 'json',
            error: function () {
                alert('Unable to load feed, Incorrect path or invalid feed');
            },
            success: function (xml) {
                values = xml.responseData.feed.entries;
                console.log(values);

                $.each(values, function(idx, value){

                    thehtml += '<a class="news-item" href="' + value.link + '" title="' + value.title +'" target="_blank"><p>' + value.publishedDate + '</p><h3>' + value.title + '</h3></a><hr>';    
                  });

              $("#content_1").html(thehtml);

            }
        });
    }
});

我加载了两个RSS源，在控制台输出中我可以看到两个数据阵列。

现在我使用$(#content_1).html(thehtml);将Feed数据作为HTML输出到容器div #content_1中。

我想要做的是将第一个RSS-feed放入#content_1，将第二个放入#content_2。我尝试使用.slice(0,10)但无法使其工作，这似乎不是最好的方法。

Answer 1

这是适当的间隔。容器内容将为空以显示新数据。

更新： Ajax结果使用可选的第二种方法定位content_1和content_2。

＆＃13;

$(function () {
function GetFeeds(){
var urls = ['http://www.gosugamers.net/counterstrike/news/rss', 'http://www.hltv.org/news.rss.php'];
urls.forEach(function(Query){
$.ajax({
  type: "GET",
  url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q='+encodeURIComponent(Query),
  dataType: 'json',
  error: function () {
  alert('Unable to load feed, Incorrect path or invalid feed');
  },
  success: function(xml) {
//--Target ID's By content_1/2
var Content=parseInt(urls.indexOf(Query))+1;
  	$("#content_"+Content).html('');  
    $.each(xml.responseData.feed.entries, function(idx, value){
    $("#content_"+Content).append('<a class="news-item" href="' + value.link + '" title="' + value.title +'" target="_blank"><p>' + value.publishedDate + '</p><h3>' + value.title + '</h3></a><hr>');    
  });
//---------------
//--Target ID's By Domain (Method Two)
/*
  	$("#"+Query.split('.')[1]).html('');  
    $.each(xml.responseData.feed.entries, function(idx, value){
    $("#"+Query.split('.')[1]).append('<a class="news-item" href="' + value.link + '" title="' + value.title +'" target="_blank"><p>' + value.publishedDate + '</p><h3>' + value.title + '</h3></a><hr>');    
  });
-----------------------------------*/
  }
});
});
}
//Call GetFeeds every 5 seconds.
setInterval(GetFeeds,5000);
//Page is ready, get feeds.
GetFeeds();
});

＆＃13;

#content_1{float:left;width:40%;overflow:hidden;border:solid 2px blue;}
#content_2{float:right;width:40%;overflow:hidden;border:solid 2px yellow;}
/* Method Two Styles
#gosugamers{float:left;width:40%;overflow:hidden;border:solid 2px green;}
#hltv{float:right;width:40%;overflow:hidden;border:solid 2px red;}
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content_1"></div>
<div id="content_2"></div>
<!-- Method Two Elements
<div id="gosugamers"></div>
<div id="hltv"></div>
-->

＆＃13;

如果您不理解上述任何源代码，请在下面留言，我会添加任何必要的评论/备注。 通过标记答案

来显示感谢

我希望这会有所帮助。快乐的编码！

循环遍历多个RSS源并输出不同的div？

1 个答案: