jquery ui tabs：在创建时获取嵌套选项卡的宽度

Question

我有一个包含tab1和tab2的主标签元素。 tab2其他嵌套标签元素包含subtab1和subtab2的位置。

最初，主要标签只有tab1。然后tab2，tab3等等动态创建，并subtab1和subtab2。

目标： 我希望在创建它们时获得嵌套标签的宽度（subtabs-*）。无需选择它们或使用任何讨厌的事件。

问题： 我可以获得Mater选项卡的宽度 var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width(); 但我无法获得奴隶标签的宽度。

我的猜测是因为tab2已创建但尚未选中，因此subtab- *不可见，因此width为零。 但是已经创建了子标记，因此必须有一种方法来获得其宽度。

通过atcive：event，我能够获得奴隶标签。但这不是我的要求。 我需要在创建它时获得它的宽度。

JSFIDDLE ：HERE

HTML：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
  </ul>
  <div id="tabs-1">
    some data
  </div>
  <div id="tabs-2">    
        <div id="subtabs">
          <ul>
            <li><a href="#subtabs-1">subtab1</a></li>
            <li><a href="#subtabs-2">subtab2</a></li>
          </ul>
          <div id="subtabs-1">
            some data
          </div>
          <div id="subtabs-2">
            some data
          </div>
        </div>    
  </div>
</div>

JS：

var $master = $("#tabs").tabs();
var $slave = $("#subtabs").tabs();

var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width();
// For display purpose append to body or use console.log
$("body").append("Master : "+master_width+"<br>");
var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width();
// For display purpose append to body or use console.log
$("body").append("Slave : "+slave_width);//returns zero

Answer 1

我认为你不能，直到显示宽度才知道。有一些方法围绕这个（见这个答案：jQuery - Get Width of Element when Not Visible (Display: None)）。

但最简单的方法是只选择选项卡并获取宽度，如果之后取消选择它，则用户不应该看到它（尽管这可能取决于系统/浏览器）。这样可以在我的系统上获得没有任何闪烁的长度：

// Activate new tab 
var oldActive = $( "#tabs" ).tabs( "option", "active" );
$( "#tabs" ).tabs( "option", "active", 1 );

// Get the width
var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width();           
$("body").append("Slave : "+slave_width);

// Make the original tab active 
$( "#tabs" ).tabs( "option", "active",oldActive );

Fiddle（对于添加第二个标签的丑陋代码感到抱歉）

否则你可能需要查看我上面链接的答案，其中包含许多通用选项。我想知道你是否可以在顶部标签下创建子标签（并隐藏），测量它们然后将它们添加到第二个标签。