[解決済み] jQuery - 非表示時の要素の幅を取得する (Display: None)

質問

jQueryでは、要素が表示されていないときwidth()は0を返すようです。理にかなっていますが、私は親を表示する前に親の幅を設定するために、テーブルの幅を取得する必要があります。

下記のように、親の中にテキストがあり、それは親を歪ませ、厄介に見せています。 私は、親がテーブルと同じ幅だけで、テキストが折り返されるようにしたいのです。

<div id="parent">
    Text here ... Can get very long and skew the parent
    <table> ... </table>
    Text here too ... which is why I want to shrink the parent based on the table
</div>

CSSです。

#parent
{
    display: none;
}

ジャバスクリプトです。

var tableWidth = $('#parent').children('table').outerWidth();
if (tableWidth > $('#parent').width())
{
    $('#parent').width(tableWidth);
}

tableWidthは可視化されていないので常に0を返します（可視化されているときは数字を与えるので私の推測です）。 親を表示させずにテーブルの幅を取得する方法はありますか？

どのように解決する？

私が使用したトリックを紹介します。 これは、いくつかの CSS プロパティを追加して、jQuery が要素を表示されていると考えるようにしますが、実際にはまだ非表示になっています。

var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });

ハックのようなものですが、私の場合は問題なく動作しているようです。

UPDATE

その後、私は ブログ記事 を書きました。 上記の方法は、CSS プロパティを空の値にリセットしているため、問題が発生する可能性があります。 以前は値があった場合はどうでしょうか。 更新されたソリューションは、jQueryのソースコードで見つかったswap()メソッドを使用しています。

参照されたブログ記事からのコードです。

//Optional parameter includeMargin is used when calculating outer dimensions  
(function ($) {
$.fn.getHiddenDimensions = function (includeMargin) {
    var $item = this,
    props = { position: 'absolute', visibility: 'hidden', display: 'block' },
    dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
    $hiddenParents = $item.parents().andSelf().not(':visible'),
    includeMargin = (includeMargin == null) ? false : includeMargin;

    var oldProps = [];
    $hiddenParents.each(function () {
        var old = {};

        for (var name in props) {
            old[name] = this.style[name];
            this.style[name] = props[name];
        }

        oldProps.push(old);
    });

    dim.width = $item.width();
    dim.outerWidth = $item.outerWidth(includeMargin);
    dim.innerWidth = $item.innerWidth();
    dim.height = $item.height();
    dim.innerHeight = $item.innerHeight();
    dim.outerHeight = $item.outerHeight(includeMargin);

    $hiddenParents.each(function (i) {
        var old = oldProps[i];
        for (var name in props) {
            this.style[name] = old[name];
        }
    });

    return dim;
}
}(jQuery));