将前2个帖子/最后2个帖子包装在不同的容器中

时间:2018-09-17 17:18:59

标签: javascript jquery json blogger feed

我正在尝试创建类似this site上的类似特色部分。我正在使用的脚本是下面的脚本,但是问题是我只有一个item变量,并且由于所有帖子都包裹在一起,因此我无法在中间一个的左侧/右侧添加帖子。如何分别设置每个帖子的样式?我想将前2个帖子和最后2个帖子包装在div容器中,以便将较大的帖子放在中间。

<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 个答案:

答案 0 :(得分:0)

您将能够发布输出html吗?适当的解决方法是正确的html布局和CSS;

public class MainActivity extends AppCompatActivity {

    String ShowOrHideWebViewInitialUse = "show";
    private WebView webview;
    private ProgressBar spinner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = (WebView) findViewById(R.id.webView); 
}

它们被称为伪类。您可以在这里找到更多关于它们的信息。 https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

答案 1 :(得分:0)

您正在使用jquery,因此可以尝试一下 ,假设主页上的帖子数为7 然后$(".post:eq(0),.post:eq(6)").wrapAll("<div class='wrapper'></div>");