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中解决。

Answer 2

在使用.tabs之前获取宽度：

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

演示：http://jsfiddle.net/4EfAJ/12/

Answer 3

单击包含表单的选项卡后，可以设置宽度。见这里：http://jsfiddle.net/4EfAJ/16/

$('#tabs').tabs();
$("#productTab").on("click",function() {
    $("#myButton").css("width", $("#textbox").width());
});

Answer 4

我认为这应该有用

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

Answer 5

尝试在标签可见时更改按钮的宽度，而不是之前：

 $('#tabs').tabs({
  activate: function(event, ui){
    if (ui.newTab.index() == 1){
        $("#myButton").css("width", $("#textbox").width() );
    }
  }
});

Answer 6

$("#textbox")在加载页面时不可见，因此您无法检索width。尝试将这些内容放在第一个选项卡上。或在第二个活跃时调整width的大小

Answer 7

试试这个第一：

<input type="text" id="textbox" **style="width:300px"** />

然后

$("#myButton").css({width:$("#textbox").width()+"px"});

希望它能带来一些解决方案

Answer 8

更灵活，只需为按钮指定宽度即可。如果他是否可见，他不会茜茜。

#textbox {
  width: 250px
}

如果你可以通过css解决问题，请在启动javascript之前选择这种方式。

在jquery中更改按钮的宽度

8 个答案: