Loop through multiple RSS sources and outputting in different divs?

问题

I want to loop through two (possibly more in the future) RSS-feeds and put them in different container divs. I started out with following this question: JQuery Fetch Multiple RSS feeds.

Here's my code.

    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);

            }
        });
    }
});

I load two RSS feeds and in the console output I can see the two data arrays.

Right now I use $(#content_1).html(thehtml); to output the feed data as HTML in a container div, #content_1.

What I want to do is to put the first RSS-feed into #content_1 and the second into #content_2. I tried using .slice(0,10) but couldn't get it to work and it doesn't seem like the best way.

回答1:

Here is the interval in place. The container content will empty to display the new data.

Update: Ajax results target content_1 and content_2 with optional second method.

$(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();
});

#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;}
*/

<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>
-->

If you don't understand any of the source code above please leave a comment below and I add any necessary comments/notes. Appreciation is shown by marking answers

I hope this helps. Happy coding!

来源：https://stackoverflow.com/questions/32260717/loop-through-multiple-rss-sources-and-outputting-in-different-divs