Javascript IT写作<；p>；元素获取其高度并使用其设置父元素的高度

在这种情况下，我需要能够根据“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>

非常感谢您的帮助。 谢谢

使用Jquery，您可以使用它搜索每个

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

---

如果您需要一个方便的工具，通过备用资源执行相同的操作：

如果您想查看github中的代码：

通过这个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元素'）.sameHeight（）

我不确定我是否理解正确，但我得到了每个

p

的高度（如果包含一些文本），并将该高度分配给最近的

li

元素和最近的

div

类

。活动详细信息

：

$（文档）.ready（函数（）{
$（'.activity item p'）。每个（函数（索引，元素）{
var txt=$.trim（$（this.text（））；
var commentsHeight=0；
如果（txt！==“”）{
commentsHeight=$（this）.height（）；
}
如果（注释高度>0）{
$（this）.parents（'li'）.css（'height'，commentsHeight）；
$（this）.closest（'div.activity-detail'）.css（“height”，commentsHeight）；
}
});
});






示例内容-虚拟文本

简单地说，假设每个
都有其后代的高度，我建议：

// 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{
框大小：边框框；
位置：相对位置；
背景色：#f90；
列表样式：无；
}
李：以前{
内容：attr（风格）；
位置：绝对位置；
排名：0；
右：0；
高度：自动；
显示：块；
}






示例内容-虚拟文本

是否应将所有
元素设置为“最高”元素的高度，或设置为该
元素中包含的
元素的高度？嘿，大卫，高度应设置为ITI中包含的元素的特定高度，在这种情况下，我的答案应解决该问题；感谢您的澄清！：）嗨，大卫，谢谢你的帮助。嗨，亚历克斯，元素的高度（如果不是空的话）应该为两个
// 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;
});