如何获得最后一个div元素的高度

时间:2016-07-04 10:03:27

标签: javascript jquery html css

我有多个具有多个高度的div元素。对于每个表,我需要获取表所在的最近div元素的高度并将其分配给它。我使用了clossest()和parents()但它不起作用,因为它始终获取页面上最后一个div元素的高度并将其分配给所有表。我需要的是表的高度应该与表所在的div相同。

<div>Some Text here</div>
<div>
<table id="firstTable">
    <tr> <th>Header 1</th>
        <th>Header 2</th>
        <th>Headier 3</th>
    </tr>
    <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
</table>
</div>  

</div>

<div class="dragitem" style="height: 300px">
<div>Some Text here</div>
<div>
  <table id="secondTable">
    <tr> <th>Header 1</th>
        <th>Header 2</th>
        <th>Headier 3</th>
    </tr>
    <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
</table>
   </div>   

</div>

我试过了:

$('#firstTable').closest('div.dragitem').height();
$('#firstTable').parents('div.dragitem').height();

但这一切都不起作用。它始终使用类名dragitem获取最后一个div的高度,并将其分配给所有表。所以在这个例子中,firstTable的高度为300px。我需要的是第一个表是600px,第二个表是200px。 感谢您的帮助

1 个答案:

答案 0 :(得分:2)

部分问题是因为您多次使用相同的id属性。 id在页面中必须是唯一的。相反,您可以使用class对常用元素进行分组。

从那里,您可以遍历每个.firstTable元素并使用closest()获取其父.dragitem div的高度,如下所示:

$('.firstTable').each(function() {
    console.log($(this).closest('div.dragitem').height());
});

Working example