javascript - Jquery获取x个第一个元素的总高度

Question

我想使用具有动态高度内容的tinker jquery 插件。 我需要知道三个第一元素的总高度，我该如何计算？

<div class="myWrapper" ticker>
 <div>
   <div ng-repeat="latest in latests" class="latest">
      <p ng-bind-html="latest.txt"></p>
   </div> 
 </div>                   
</div>

我的指令:

 restrict: 'A',
 link: function($scope, element) {

   var height = //I need the total height of the firsts three divs with class latest

         element.easyTicker({
            height: height',
            interval: 5000
         });
  }

Answer 1

由于您需要让 Angular 渲染元素，因此我会将指令放在转发器上，然后您可以检查 ng-repeat 子项中的 $last 属性范围。

<div class="myWrapper">
 <div>
   <div ng-repeat="latest in latests" class="latest" ticker-item>
      <p ng-bind-html="latest.txt"></p>
   </div> 
 </div>                   
</div>

指令

app.directive('ticker-item', function () {
    restrict: 'A',
    link: function ($scope, element) {
        var height = 0;
        /* wait for last element in ng-repeat */
        if ($scope.$last) {
            element.siblings(':lt(3)').each(function () {
                height += $(this).height();
            });
            element.closest('.myWrapper').easyTicker({
                height: height,
                interval: 5000
            });
       }
    }
});

如果插件未正确设置最后一个元素，请在指令中注入(inject) $timeout 并将插件初始化包装在 $timeout() 中。这将确保首先渲染所有中继器元素