从站点的另一个页面获取博客帖子信息(它们具有相同的类，需要考虑顺序)

我在Weebly.com上有一个网站。他们有一个内置的博客服务，为每篇文章创建随机的主div id。不过，title、date和content的类始终保持不变。所以我猜脚本需要考虑它得到的信息的顺序。

那么，我如何才能使这些类中的信息显示在我的主页上(以适当的顺序)?

---

我在找什么:

• 获取相应链接的博客标题

• 获取博客日期

• 获取博客内容 (具有一定字符数量的显示限制)

• 信息得到正确的顺序 (帖子1:博客标题1，博客日期1，内容1 -帖子2:博客标题2，博客日期2，内容2，等等…)

• 设置在主页上显示的博客文章提取量

如果有人知道如何做到这一点，非常感谢!

---

blog页面上的HTML代码 (JSFiddle here)

<div id='wsite-content'>
    <!-- POST 1 -->
    <div id='blog-post-984693871936925110' class='blog-post'>
        <div class='blog-header'>
             <h2 class='blog-title'><a href='/loremipsum1.html' class='blog-title-link' class='blog-link'>Lorem ipsum 1</a></h2> 
            <p class='blog-date'><span class='date-text'>03/16/2014</span></p>
            <!-- 984693871936925110 -->
        </div>
        <div class='blog-separator'>&nbsp;</div>
        <div class='blog-content'>
            <div class="paragraph" style="text-align:left;">Lorem ipsum text content 2.</div>
        </div>
    </div>
    <!-- POST 2 -->
    <div id='blog-post-714981109579736638' class='blog-post'>
        <div class='blog-header'>
             <h2 class='blog-title'><a href='/loremipsum2.html' class='blog-title-link' class='blog-link'>Lorem ipsum 2</a></h2> 
            <p class='blog-date'><span class='date-text'>03/16/2014</span></p>
            <!-- 714981109579736638 -->
        </div>
        <div class='blog-separator'>&nbsp;</div>
        <div class='blog-content'>
            <div class="paragraph" style="text-align:left;">Lorem ipsum text content 2.</div>
        </div>
    </div>
    <!-- POST 3 -->
    <div id='blog-post-867134434816472113' class='blog-post'>
        <div class='blog-header'>
             <h2 class='blog-title'><a href='/loremipsum3.html' class='blog-title-link' class='blog-link'>Lorem ipsum 3</a></h2> 
            <p class='blog-date'><span class='date-text'>03/16/2014</span></p>
            <!-- 867134434816472113 -->
        </div>
        <div class='blog-separator'>&nbsp;</div>
        <div class='blog-content'>
            <div class="paragraph" style="text-align:left;">Lorem ipsum text content 3.</div>
        </div>
    </div>
</div>

$(function () {
  var numOfPosts= 1;
  $('.blog-post').each(function(){
   if(numOfPosts < 10) {        
         var title = $(this).find('.blog-title').html();
         var date  = $(this).find('.blog-date').html();
         var contents  = $(this).find('.blog-content').html();
         numOfPosts++;
     }
 });
});