确定第一个和最后两个帖子

I am using the script below to show the latest 5 posts on my Blogger blog. How can I wrap the first and last 2 posts in different div containers? Currently all the 5 posts are inside a wrapper container stored in the item variable:

我使用下面的脚本在我的Blogger博客上显示最新的5个帖子。如何将第一个和最后两个帖子包装在不同的div容器中?目前所有5个帖子都在一个存储在item变量中的包装容器中:

<script type='text/javascript'>
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0,400);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s1600/');
      var item = '<div class="wrapper"><img src="' + postImage + '"/><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

2 个解决方案

#1

More generic solution would not check for last and previous to last elements checking for 3 or 4 but should be based on total length of your posts (it can be 3 it can be 10000).

更通用的解决方案不会检查最后一个元素和最后一个元素检查3或4,但应该基于帖子的总长度(它可以是3,它可以是10000)。

Checks below should be place in your loop.

下面的检查应该放在你的循环中。

if(i === 0 || i === 1)

if(i === 0 || i === 1)

Always use === operator as it is typesafe. Also group your checks in a way that is easy to understand (check for first and second in one if and for last and previous to last in another if:

始终使用===运算符,因为它是类型安全的。还要以易于理解的方式对您的支票进行分组(如果出现以下情况,请检查第一个和第二个以及最后一个和第二个,如果:

if(i === json.feed.entry.length || i === json.feed.entry.length - 1) - this check is based on length of your entries, not some fixed value like 3 or 4.

if(i === json.feed.entry.length || i === json.feed.entry.length - 1) - 此检查基于条目的长度,而不是像3或4这样的固定值。

This way if your displayed entries value will change in future (to ex. 10), you don't need to adjust your code here. All code you write should strive to work without such adjustments when code it uses changes.

这样,如果您显示的条目值将来会更改(例如10),则无需在此处调整代码。当您使用的代码发生变化时,您编写的所有代码都应努力工作而不进行此类调

#2

Check desired elements through loop

通过循环检查所需的元素

// to check first or fourth element
if (i == 0 || i == 3)
// to check second or fifth element
if (i == 1 || i == 4)

Wrap them by adding HTML tages

通过添加HTML tages包装它们

<script type='text/javascript'>
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0,400);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s1600/');
      var item = '<div class="wrapper"><img src="' + postImage + '"/><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      if (i == 0 || i == 3) document.write('<div>');
      document.write(item);
      if (i == 1 || i == 4) document.write('</div>');
    }
  }
</script>
<script src="/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

#1