Оберните первые / последние 2 сообщения в разных контейнерах - PullRequest
Новая
       11

Оберните первые / последние 2 сообщения в разных контейнерах

0 голосов
/ 17 сентября 2018

Я пытаюсь создать похожий раздел, как на этом сайте .Сценарий, который я использую, приведен ниже, но проблема в том, что у меня есть только одна переменная элемента, и я не могу добавить посты слева / справа от средней, поскольку все посты обернуты одинаково.Как я могу оформить каждый пост отдельно?Я хочу обернуть первые и последние 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 голосов
/ 21 сентября 2018

вы используете jquery, так что вы можете попробовать это Предположим, что количество сообщений на главной странице составляет 7 тогда $(".post:eq(0),.post:eq(6)").wrapAll("<div class='wrapper'></div>");

0 голосов
/ 17 сентября 2018

Сможете ли вы опубликовать выходной HTML?Соответствующим исправлением для этого является правильное расположение HTML и CSS; 

.image:first-of-type{
 width:40px;
}

.image:last-of-type{
 width:40px;
}

Они называются псевдо-классами.Вы можете найти больше о них здесь;https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

...