javascript - 从网站的另一个页面获取博客文章信息(它们具有相同的类，需要注意顺序)

Question

好的，我在 Weebly.com 上有一个网站。他们有一个内置的博客服务，可以为每个帖子创建随机的主分区。不过，标题、日期和内容的类始终保持不变。所以我想脚本需要考虑它获取的信息的顺序。

那么我如何才能将这些类中的信息显示在我的主页上(按正确的顺序)？

<小时/>

我在寻找什么:

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

• 获取博客日期

• 获取博客内容(显示限制为一定字符数)

• 信息按正确顺序排列(帖子 1:博客标题 1、博客日期 1、内容 1 – 帖子 2:博客标题 2、博客日期 2、内容 2等等……)

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

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

<小时/>

博客页面上的 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>

Answer 1

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

这将仅提取前 10 篇帖子所需的所有数据。