jquery - 改变jquery中按钮的宽度

Question

我正在尝试更改按钮的宽度以匹配 jquery 中按钮上方文本框的宽度。我尝试使用以下行来完成此操作:

$("#myButton").css("width", $("#textbox").width());

在下面的代码中:

JSFiddle

JQuery:

$('#tabs').tabs();
$("#myButton").css("width", $("#textbox").width());

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1"> Tab 1</a></li>
        <li><a href="#tabs-2" id="productTab">Tab 2</a></li>
    </ul>
    <div id="tabs-1" class="buttons" class="ui-widget">
    </div>
    <div id="tabs-2">
        <table>
            <tr>
                <td>
                    <input type="text" id="textbox" />
                </td>
            </tr>
            <tr>
                <td>
                    <button id="myButton">My Button
                    </button>
                </td>
            </tr>
        </table>
    </div> 
</div>

我相信，由于我使用的是选项卡，文本框的宽度不会立即可用。

Answer 1

问题是因为文本框是隐藏的(在未显示的选项卡中)，因此无法计算它的宽度。解决方法是克隆元素，追加它，然后获取它的宽度，最后将它从 DOM 中删除。

$('#tabs').tabs();
var $textboxClone = $('#textbox').clone().appendTo('#tabs');
$("#myButton").css("width", $textboxClone.width());
$textboxClone.remove();

Updated fiddle

注意；这里宽度的微小差异是由于填充和/或边距差异造成的，我将让您在 CSS 中解决这些差异。