Question

我有一种情况，我需要能够设置＆＃34; li＆＃34;的高度。和＆＃34; div＆＃34;基于其高度的元素＆＃34; p＆＃34;元件。

例如，在以下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>

我需要设置＆＃34; div class = activity-detail＆＃34;的高度。元素和＆＃34; li class = activity-item＆＃34;元素到＆＃34; p class = activity-comment＆＃34;的高度。＆＃34; p＆＃34;元素可以是空的，即没有任何内容，或者它可以包含大量文本。

挑战是能够首先达到所有＆＃34; p＆＃34;所有＆＃34; li＆＃34;中的元素如果＆＃34; p＆＃34;元素不是空的，其次使用高度值来设置每个＆＃34; li＆＃34;元件。

到目前为止，我有以下jquery让我获得了＆＃34; p＆＃34;元素（基于它们的内容），但不太确定如何使用检索到的高度值然后设置＆＃34; li＆＃34;的高度。元素：

$(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元素，并将最近的div分配给.activity-detail 1}}：

＆＃13;

$(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);
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

使用Jquery，您可以使用parents()搜索每个li的{{1}}包装器：

Answer 3

如果您想要一个方便的工具通过备用资源执行相同的操作： http://smohadjer.github.io/sameHeight/demo/demo.html

如果你想查看github中的代码：https://github.com/smohadjer/sameHeight

通过这个jQuery调用：

$('.parent-element').sameHeight({

    //this option by default is false so elements on the same row can have
    //different height. If set to true all elements will have the same height
    //regardless of whether they are on the same row or not.
    oneHeightForAll: true,

    //this option by default is false. If set to true css height will be
    //used instead of min-height to change height of elements.
    useCSSHeight: true,

    //this function will be called every time height is adjusted
    callback: function() {
        //do something here...
    }
});

或者没有所有选项：$('.parent-element').sameHeight();

Answer 4

最简单的是，假设每个<li>应该具有其后代的高度，我建议：

// iterating over each <li> element using the height() method;
// using that method's anonymous function to return a specific
// potentially unique value for each element in turn:
$('li').height(function(){

  // looking inside of the current <li> element for a <p>
  // element that is not ':empty' and caching the result
  // of that selector in the 'p' variable:
  let p = $(this).find('p:not(:empty)');

  // if we have a collection greater than 0 (and so a truthy
  // length) we return the height of the first found <p> element
  // matching the selector; otherwise with a falsey length (of
  // zero) we return 0 (on the assumption you wish to hide those
  // elements):
  return p.length ? p.height() : 0;
});

$('li').height(function() {
  let p = $(this).find('p:not(:empty)');
  return p.length ? p.height() : 0;
});

li {
  box-sizing: border-box;
  position: relative;
  background-color: #f90;
  list-style: none;
}
li::before {
  content: attr(style);
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  display: block;
}

<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>

JS Fiddle demo

但是，如果每个<li>应该具有共同的高度，则基于最高的<p>元素的高度：

// selecting all <li> elements, and updating the height of
// all <li> elements:
$('li').height(

  // here we select all non-empty <p> elements contained
  // within an <li> element using jQuery and then convert
  // that collection to an Array, using get(); we then
  // use Array.prototype.reduce() to reduce the Array to one
  // single value, in this case the height of the tallest
  // <p> element:
  $('li p:not(:empty)').get().reduce(function(a, b) {

    // the initial value is 0 (set as the second argument
    // to the reduce() method); in this function we
    // subtract the clientHeight of each <p> element from
    // the initial value, and then from the previous value,
    // keeping the largest value (whether a or b):
    return b.clientHeight - a;
  }, 0)
);

$('li').height(
  $('li p:not(:empty)').get().reduce(function(a, b) {
    return b.clientHeight - a;
  }, 0)
);

li {
  box-sizing: border-box;
  position: relative;
  background-color: #f90;
  list-style: none;
}
li::before {
  content: attr(style);
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  display: block;
}

<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>

JS Fiddle demo

参考文献：

CSS：
- :empty pseudo-class。
- :not() negation pseudo-class。
jQuery的：
- find()。
- get()。
- height()。
JavaScript的：
- Array.prototype.reduce()。
- let statement。

Iteriting <p>元素获取高度并使用它来设置父LI元素

4 个答案: