jQuery resizable 仅适用于第一个元素答案

【问题标题】：jQuery resizable only works on first elementjQuery resizable 仅适用于第一个元素
【发布时间】：2010-11-09 14:29:33
【问题描述】：

我的页面上有一个控件，其中包含多个需要调整大小的多行文本框。
我正在尝试使用 jQuery resizable 函数来完成此任务。我只需要我的文本框可以垂直扩展。不幸的是，我只能让可调整大小的函数适用于第一个 div。

这是我的代码示例：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Page_jQuery_Resizable.aspx.vb"
    Inherits="jQueryTest.Page_jQuery_Resizable" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Test - Page 2</title>
    <script src="Scripts/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="Scripts/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
</head>
<body>
    <style type="text/css">
        table.textboxTable td
        {
            padding: 15px;
            padding-bottom: 30px;
            border: 2px solid blue;
        }
        .ImResizable
        {
            height: 60px;
            width: 470px;
        }
        .ImResizable textarea
        {
            height: 95%;
            width: 100%;
        }
        .ui-resizable-handle
        {
            height: 8px;
            width: 474px;
            background: #EEEEEE url('Images/grippie.png') no-repeat scroll center;
            border-color: #DDDDDD;
            border-style: solid;
            border-width: 0pt 1px 1px;
            cursor: s-resize;
        }
    </style>
    <form id="form1" runat="server">

    <table class="textboxTable">
        <tr>
            <td>
                <div class="ImResizable">
                    <asp:TextBox runat="server" TextMode="MultiLine" />
                    <div class="ui-resizable-handle" />
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="ImResizable">
                    <asp:TextBox runat="server" TextMode="MultiLine" />
                    <div class="ui-resizable-handle" />
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
<script type="text/javascript">
    $(function ()
    {
        $("div.ImResizable").resizable(
        {
            minHeight: 25,
            maxHeight: 85,
            minWidth: 470,
            maxWidth: 470,
            handles: { 's': $("div.ui-resizable-handle") }
        });
    });
</script>

【问题讨论】：

标签： jquery jquery-ui resizable jquery-ui-resizable jquery-resizable

【解决方案1】：

您可以使用 $.each 并遍历元素。像这样：

$("div.ImResizable").each(function() {
    var $this = $(this);
    $this.resizable({
        minHeight: 25,
        maxHeight: 85,
        minWidth: 470,
        maxWidth: 470,
        handles: { 's': $this.find("div.ui-resizable-handle") }
    });
});

【讨论】：

谢谢！谢谢！谢谢！这正是我需要的！我感谢所有其他“每个”建议，但我的小大脑真正需要的是代码！

【解决方案2】：

您正在寻找jQuery.each 函数。

【讨论】：

我对 jQuery.each 函数不是很熟悉，你能举个例子说明如何将它整合到我的解决方案中吗？
$("div.ImResizable").each(function() { $(this).resizable(); });

【解决方案3】：

以上正确。您需要遍历类的每个元素，并分配子句柄或相关句柄，就像您现在所做的那样，您将 div.ui-resizable-handle 的通用类分配为句柄div.ImResizable 的通用类元素。它们没有一对一的匹配。

【讨论】：

我想我有点跟随，但真的可以使用代码示例来帮助说明问题。

【解决方案4】：

基本上，如果您一次将 Resizable 应用于多个对象，您只需为要用作句柄的子元素传递一个选择器。此外，在要应用可调整大小的每个元素中，这必须相同。

Example

引用自 jQueryUI 网站。加粗以强调。 http://api.jqueryui.com/resizable/#option-handles

对象：支持以下键：{ n, e, s, w, ne, se, sw, nw }。任何指定的值都应该是一个 jQuery 选择器，匹配可调整大小的子元素，以用作该句柄。如果句柄不是可调整大小的子级，则可以直接传入 DOMElement 或有效的 jQuery 对象。注意：生成自己的句柄时，每个句柄都必须具有 ui-resizable-handle 类，以及适当的 ui-resizable-{direction} 类，例如，ui-resizable-s。

HTML：

<table class="textboxTable">
    <tr>
        <td>
            <div class="ImResizable">
                <asp:TextBox runat="server" TextMode="MultiLine" />
                <div class="ui-resizable-handle" />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="ImResizable">
                <asp:TextBox runat="server" TextMode="MultiLine" />
                <div class="ui-resizable-handle ui-resizable-s" />
            </div>
        </td>
    </tr>
</table>

Javascript：

$(function ()
{
    $("div.ImResizable").resizable(
    {
        minHeight: 25,
        maxHeight: 85,
        minWidth: 470,
        maxWidth: 470,
        handles: { 's': "div.ui-resizable-handle" }
    });
});

【讨论】：