Question

我使用Jquery Tab，每张标签都有表格。如何同时获取所有表格的高度（不是使用点击等事件获得每个活动标签的表格高度）。

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

注意，

请参阅Fiddle

Answer 1

就像你发帖后的评论一样，没有“API方式”可以获得你想要的东西，但你可以使用这段代码片段来实现你的目的。

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

一种方法是遍历标签并最初激活/停用它们：

$(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的答案相比，优势在于标签切换而不仅仅是内容。但是如果没有每个页面加载的闪烁内容，就没有办法做到这一点。更清洁的方式需要确保所有表格单元具有相同的高度。没有内容需要以这种方式显示，但如果行的高度不同，则不会给出所需的结果：

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

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

2 个答案: