javascript - 迭代 元素获取它们的高度并使用它来设置父 LI 元素的高度

Question

我有一种情况需要能够根据“p”元素的高度来设置“li”和“div”元素的高度。

例如在下面的 HTML 中:

<ul>
  <li class ="activity-item">
   <div class ="activity-detail">
    <div class ="activity-comments">
     <p class="activity-comments"></p>
    </div>
   </div>
  </li>
  <li class ="activity-item">
   <div class ="activity-detail">
    <div class ="activity-comments">
     <p class="activity-comments">sample content - dummy text</p>
    </div>
   </div>
  </li>
</ul>

我需要将“div class=activity-detail”元素和“li class=activity-item”元素的高度设置为“p class=activity-comment”的高度。 “p”元素可以为空，即没有任何内容，也可以包含大量文本。

挑战在于，如果“p”元素不为空，首先能够获取所有“li”元素中所有“p”元素的高度，然后使用高度值设置每个元素的高度“li”元素。

到目前为止，我有以下 jquery，它让我得到“p”元素的高度(基于它们的内容)，但不太确定如何使用检索到的高度值来设置“li”的高度"元素:

$(document).ready(function(){  
    $('.activity-item p').each(function(index, element){
         var commentsHeight = $(this).height();
         alert(commentsHeight);


             //the below does not quite work correctly yet
         $('li.activity-item').css("height",commentsHeight);
         $('div.activity-detail').css("height",commentsHeight);
     });
    });

非常感谢任何帮助/协助。谢谢

Answer 1

不确定我是否理解正确，但我得到了每个 p 的高度(如果包含一些文本)并将该高度分配给最近的 li 元素和最近的 具有类 .activity-detail 的 div:

$(document).ready(function() {
  $('.activity-item p').each(function(index, element) {
    var txt = $.trim($(this).text());
    var commentsHeight = 0;
    if (txt !== "") {
      commentsHeight = $(this).height();
    }

    if (commentsHeight > 0) {
      $(this).parents('li').css('height', commentsHeight);
      $(this).closest('div.activity-detail').css("height", commentsHeight);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="activity-item">
    <div class="activity-detail">
      <div class="activity-comments">
        <p class="activity-comments"></p>
      </div>
    </div>
  </li>
  <li class="activity-item">
    <div class="activity-detail">
      <div class="activity-comments">
        <p class="activity-comments">sample content - dummy text</p>
      </div>
    </div>
  </li>
</ul>