添加到整个班级的 offsetHeight答案

【问题标题】：Add to offsetHeight of entire class添加到整个班级的 offsetHeight
【发布时间】：2015-08-29 02:31:11
【问题描述】：

我有一个页面，其中的元素具有一类可变高度，具体取决于它们的文本内容的大小。在页面加载时，我需要将 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

【问题讨论】：

标签： javascript jquery html css meteor

【解决方案1】：

正如评论中提到的humble.rumble，您的代码无法正常工作，因为在加载正文时，模板FullFeed 还没有生成任何“.post-contain” div。

你不应该立即在main.js中执行代码来修改模板生成的DOM，而是~~使用Template.myTemplate.onRendered回调注册函数。~~ 更新：模板。来自 Meteor 的 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，因此 Template 全局变量可能在文档加载之前不可用，在这种情况下，您可以使用 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？

【讨论】：

这似乎应该工作，但它没有。也没有错误。如果您想检查我所做的更改，您的代码的当前版本已启动。
我在 http://whensayfeed.meteor.com 的 Meteor 处理文件中找不到我提出的答案中的任何代码。也许您可以从您的流星目录上传所有源代码并将其链接到此处。这样可能更容易找到问题。
这里是完整的源代码：dl.dropboxusercontent.com/u/58842756/WhenISayFeed.zip
所以我在本地测试了一下。 Template.myTemplate.onRendered 的回调实际上是在所有数据加载之前执行的。所以用 MutationObserver 替换它似乎是最简单的解决方案。我还发现了有关此特定问题的其他 SO 问题。