Question

我正在使用以下脚本在Blogger博客上显示最新的5条帖子。如何将前2个帖子和最后2个帖子包装在不同的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>

Answer 1

通过循环检查所需元素

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

通过添加HTML标签来包装它们

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

Answer 2

更通用的解决方案不会检查3个元素或4个元素的倒数第二个元素，但应基于帖子的总长度（可以是3，也可以是10000）。

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

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

始终使用===运算符，因为它是类型安全的。还要以易于理解的方式对支票进行分组（在一个if中检查第一和第二，在另一个if中检查倒数第二和倒数第二：

if(i === json.feed.entry.length || i === json.feed.entry.length - 1)-此检查基于条目的长度，而不是一些固定值，例如3或4。

这样，如果您显示的条目值将来会更改（例如10），则无需在此处调整代码。您编写的所有代码在使用更改时都应努力在不进行此类调整的情况下工作。

确定前两个帖子

2 个答案: