通過多個RSS源循環並輸出到不同的div？

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);在容器div中輸出HTML格式的訂閱源數據，#content_1。

什麼我要要做的是把第一個RSS飼料到#content_1第二個到#content_2。我嘗試使用.slice(0,10)，但無法使其工作，它似乎不是最好的方式。

Answer 1

這是間隔。容器內容將清空以顯示新數據。

更新： Ajax以可選的第二種方法結果爲目標content_1和content_2。

$(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; 
 
    \t $("#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) 
 
/* 
 
    \t $("#"+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> 
 
-->

如果你不明白任何的源代碼上述請留下下面評論，我添加任何必要的註釋/備註。 鑑賞通過標記答案顯示

我希望這有助於。快樂的編碼！