Question

如果div的身高低于其父亲的身高，我该如何检查？

让我们说我有多个div，每个父母都有不同身高的多个父母。

Answer 1

您可以使用jQuery的.height()方法。

$('div').each(function(){
    if ($(this).height() < $(this).parent().height()) {
      // do something
    }
});

要将每个子div的高度设置为其父级，您可以将其放在函数中：

$(this).height($(this).parent().height());

Answer 2

借助jQuery filter（）方法，您可以检查高度与其父元素相比较少的所有div元素。

在下面的示例中，我们将背景颜色应用于高度小于其父级的子元素。

HTML代码

<div id="par1" class="parentcls" style="height: 10px;">
    <div id="child1" class="childtcls" style="height: 50px;"></div>
</div>
<div id="par2" class="parentcls" style="height: 50px;">
    <div id="child2" class="childtcls" style="height: 70px;"></div>
</div>
<div id="par3" class="parentcls" style="height: 20px;">
    <div id="child3" class="childtcls" style="height: 10px;"></div>
</div>
<div id="par4"  class="parentcls" style="height: 40px;">
    <div id="child4" class="childtcls" style="height: 30px;"></div>
</div>

CSS代码

div {
    width: 100px; 
    border: 1px solid #ff0000; 
    float: left;
}

div.childtcls {
    border: 1px solid #0000ff;
}

div.parentcls {  margin: 10px;}

jQuery代码

$("div").filter(function(index){
    return $( this).height() < $( this ).parent().height();
}).css('background-color', '#00ff00');

http://jsfiddle.net/o0w27jfs/1/

检查每个元素的高度是否低于父级

2 个答案: