jQuery UI標簽：在創建時獲取嵌套標簽的寬度

Question

我有帶有tab1和tab2主選項卡元素。 其中tab2還有另一個嵌套的tab元素，分別帶有subtab1和subtab2 。

最初，master選項卡僅具有tab1然后動態創建tab2 ， tab3等..並具有subtab1和subtab2 。

目標：我想在創建嵌套選項卡（ subtabs-* ）時獲得其寬度。不必選擇它們或使用任何討厭的事件。

問題：我可以使用var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width();獲得Mater標簽的寬度var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width(); 但是我無法獲得slave tab的寬度。

我的猜測是因為創建了tab2卻尚未選擇它，因此subtab- *不可見，因此寬度為零。 但是已經創建了子選項卡，因此必須有一種獲取其寬度的方法。

我可以通過atcive：event獲得從屬選項卡的信息。 但這不是我的要求。 創建它時，我需要獲取它的寬度。

JSFIDDLE ： 此處

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-在不可見時獲取元素的寬度（顯示：無） ）。

但是最簡單的方法就是選擇選項卡並獲取寬度，如果此后取消選擇它，則用戶將看不到它（盡管這可能取決於系統/瀏覽器）。 這得到的長度在我的系統上沒有任何閃爍：

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

小提琴 （很抱歉添加第二個標簽的丑陋代碼）

否則，您可能需要查看我上面鏈接的答案，該答案具有很多通用選項。 我想知道您是否可以在頂部選項卡“下”（然后隱藏）創建子選項卡，對其進行度量，然后將其添加到第二個選項卡。