我有一个页面,其元素在一类可变高度中,基于它们的文本内容的大小。在页面加载时,我需要将20px添加到所有页面的高度。
var visibleposts = document.getElementsByClassName("post-contain");
for(var i =0; i <= visibleposts.length; i++){
visibleposts[i].style.height = visibleposts[i].offsetHeight + 20 + "px";
}
这是我使用的代码。我把它放在页面加载运行的init()
函数内。但是,由于它在流星服务器上运行,我不确定它的工作情况。我有它的身体负荷。像这样:
<head>
<script src="jquery-2.1.4.min.js"></script>
<script src="main.js"></script>
</head>
<body onload="init();">
</body>
<template name="FullFeed">
{{#each posts}}
<!-- <a href="whenisay://{{adjective}}/{{noun}}/{{user}}/{{likes}}/{{date}}/{{_id}}">-->
<a href="UnLiked.png">
<div class="post-contain">
<div class="chant">When I say <span class="varline">{{adjective}}</span> you say <span class="varline">{{noun}}</span></div>
<!--
<div class="author-box">
<p>By {{user}}<span class="spacer"> - </span>
<img class="heart" src="UnLiked.png" onclick="console.log('hello');"/>
</p>
</div>
-->
</div>
</a>
<div class="author-box">
<p>By {{user}}<span class="spacer"> - </span>
<img class="heart" src="UnLiked.png" onclick="console.log('hello');"/>
</p>
</div>
{{/each}}
</template>
如果您想调试它,它会在http://whensayfeed.meteor.com
运行答案 0 :(得分:0)
作为评论中提到的humble.rumble,您的代码无效,因为在加载正文时,模板FullFeed还没有生成任何“.post-contains”div。
您不应该在main.js中执行代码来立即修改模板生成的DOM,但是使用Template.myTemplate.onRendered回调注册函数。 更新:来自Meteor的Template.myTemplate.onRendered不会等待加载单个数据。有很多解决方案如何在加载所有项目后附加回调。请参阅其他StackOveflow问题:
然而,这些都不是无缝的,而且相当简单。这就是您可以使用MutationObserver的原因。在您的情况下,您希望观察添加的<a/>
项到<body/>
,然后找到.post-contain
:
new MutationObserver(function (mutations){
mutations.forEach(function (mutation){
$(mutation.addedNodes).each(function (){
if (this.localName == "a")
var myNewDiv = $(".post-contain",this)[0]
});
});
}).observe($("body")[0], {childList: true});
由于我不熟悉Template API,因此在加载文档之前,模板全局变量可能无法使用,在这种情况下,您将使用JQuery的.ready( handler )
由于您要包含JQuery,因此您可以使用它来设置高度。试试.height( function )。在你的情况下,它看起来像这样:
$(".post-contain").height(function (index, height) {
// Increase the height of all ".post-contain" divs
return (height + 20);
});
所有这些组合在一起产生以下结果:
$(function(){
new MutationObserver(function (mutations){
mutations.forEach(function (mutation){
$(mutation.addedNodes).each(function (){
if (this.localName == "a")
$(".post-contain",this).height(function (index, height){
return (height + 20);
});
});
});
}).observe($("body")[0], {childList: true});
});
我在本地Meteor安装上测试了这个。
顺便问一下,为什么你需要像这样添加高度?然后你必须接受其他事件,比如.resize()。如果你希望div基于内容有额外的高度,为什么不使用CSS padding
呢?