Добавить в offsetHeight всего класса

У меня есть страница с элементами в одном классе переменных высот в зависимости от размера текстового содержимого из них. При загрузке страницы мне нужно добавить 20 пикселей на высоту всех из них.Добавить в 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 упоминалось в комментарии, ваш код не работает, потому что в то время тело загружается, есть еще не любые «.post-содержать» div, созданные шаблоном FullFeed.

Вы не должны выполнять код для изменения созданного шаблоном DOM немедленно в main.js, но ~~использует функцию регистрации обратного вызова Template.myTemplate.onRendered.~~Обновление: Template.myTemplate.onRendered от Meteor не дожидаясь загрузки отдельных данных. Существует множество решений по подключению обратного вызова после загрузки всех элементов. Другие вопросы 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's .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(). Если вы хотите, чтобы у divs была дополнительная высота на основе контента, почему бы не использовать CSS padding?

источник

2015-06-13 04:26:03 Sha

Кажется, что он должен работать, но это не так. И ошибок нет. Текущая версия с вашим кодом повышается, если вы хотите проверить внесенные изменения. –

Я не смог найти ни одного из кода из моего предложенного ответа в обработанных файлах Meteor [http://whensayfeed.meteor.com] (http://whensayfeed.meteor.com). Возможно, вы можете загрузить все исходные коды из своего каталога метеор и связать его здесь. Может быть, легче найти проблему таким образом. – Sha

Вот полный источник: https://dl.dropboxusercontent.com/u/58842756/WhenISayFeed.zip –

Добавить в offsetHeight всего класса

ответ

Смежные вопросы