javascript - 将第一个/最后 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>
解决方案
你能发布输出的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
推荐阅读
- ruby - 如何在 Ruby 中检查用户的 root 权限?
- php - 更改多维数组值
- javascript - 带有来自 HTML 表的数据的 Highchart(饼图)不显示图例
- php - 尝试使用 Azure SQL 服务器时 Laravel 出现问题;count():参数必须是数组或者实现了Countable的对象
- php - 尝试创建图像表时出现 CSS 问题
- javascript - 两个定时 jQuery 事件
- spring - Spring 5:没有 Spring Boot 的 Restful API
- php - 变量产品的 Laravel 雄辩关系
- ios - UISegmentedControl 自定义/扩展
- c++ - 在 QMenuBar/QMenu 上捕获 keyPressEvent?