Iteriting <p> 元素获取其高度并使用其设置父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元素和最接近div的类.activity-detail ：

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

Answer 2

使用Jquery，您可以使用parents()在每个p的li包装器中搜索：

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

     //Refer to "this" element and search for the parents
     $(this).parents('li, div.activity-detail').css("height",commentsHeight);
  });
});

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小提琴演示 。

但是，如果每个<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小提琴演示 。

参考文献：

• CSS：
  • :empty伪类 。
  • :not()否定伪类 。
• jQuery的：
  • find() 。
  • get() 。
  • height() 。
• JavaScript的：
  • Array.prototype.reduce() 。
  • let声明 。