添加到offsetHeight整個類

我有一個基於它們的文本內容大小的變量高度類中的元素的頁面。在頁面加載時，我需要將20px添加到它們全部的高度。添加到offsetHeight整個類

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

來源

2015-06-13 Isaac Wasserman

正如在評論中提到humble.rumble運行，你的代碼是不工作，因爲身體被加載時，有沒有由FullFeed模板生成的任何「.post-contain」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});

由於我不熟悉的模板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}); 
});

我已經在本地安裝流星測試這一點。

順便說一句，爲什麼你需要添加這樣的高度？然後你將不得不採取其他事件，如.resize()。如果你想讓div根據內容有額外的高度，爲什麼不用CSS padding來代替？

來源

2015-06-13 04:26:03 Sha

這看起來應該可以工作，但事實並非如此。也沒有錯誤。如果您想檢查我所做的更改，則帶有您的代碼的當前版本已啓動。 –

我無法在[http://whensayfeed.meteor.com]（http://whensayfeed.meteor.com）的流星處理文件中找到我提出的答案中的任何代碼。也許你可以從你的流星目錄上傳所有的源代碼並鏈接到這裏。這種方式可能會更容易找到問題。 – Sha

以下是完整的源代碼：https：//dl.dropboxusercontent.com/u/58842756/WhenISayFeed.zip –

添加到offsetHeight整個類

回答

相關問題