获取位于非活动选项卡上的 table 高度

Question

我正在使用 Jquery 标签，每个标签都有 table。我怎样才能同时获得所有 table 的高度（而不是使用点击等事件获得每个活动选项卡的 table 高度）。

   $(function() {
        $( "#tabs" ).tabs();
  });
alert("Table 1 Height is : "+ $("#table1").height());
alert("Table 2 Height is : " +$("#table2").height());

注意，

见Fiddle

Answer 1

就像你post后的评论说的那样，没有"API way"得到你要找的东西，但你可以使用这个代码片段来达到你的目的。

$(function() {
   $( "#tabs" ).tabs();
   $('#tabs div').each(function(index){
     var display = $(this).css('display');
     $(this).css('display', 'block');
     table = $(this).find('table');
     alert("Table "+ index +" Height is : "+ table.height());         
     $(this).css('display',display);
   });
});

Answer 2

一种方法是遍历选项卡，最初 activate/deactivate 它们：

$(function() {
    var tableHeights = {};
    $( "#tabs" ).tabs();

    $( "#tabs" ).tabs('widget').children('div').each(function(i) {
        var table = $(this).find('table');
        $( "#tabs" ).tabs('option', 'active', i);
        tableHeights[ table.attr('id') ] = table.height();
    });
    $( "#tabs" ).tabs('option', 'active', 0);

    alert("Table 1 Height is : "+ tableHeights['table1']);
    alert("Table 2 Height is : "+ tableHeights['table2']);
});

见edited Fiddle

与 Wenceslao Negrete 的回答相比，优势在于选项卡切换而不仅仅是内容。但是如果没有每次页面加载时闪烁的内容，就没有办法做到这一点。更简洁的方法需要确保所有 table 个单元格具有相同的高度。不需要以这种方式显示任何内容，但如果行的高度不同，它不会给出所需的结果：

var rowHeight;
$( "#tabs" ).tabs('widget').children('div').each(function(i) {
    var table = $(this).find('table');
    if (i === 0) {
        // assuming on load the active tab is always the first
        rowHeight = table.find('td:first').height();
    }
    tableHeights[ table.attr('id') ] = table.find('tr').length * rowHeight;
});

获取位于非活动选项卡上的 table 高度

Get table height that is located on not active tab

jquery

tabs

height