jQuery resizable只适用于第一个元素

我的页面上有一个控件将包含多个需要resize的多行文本框。
我试图使用jQuery resizable函数来完成此任务。 我只需要我的文本框可以垂直扩展。 不幸的是，我只能获得可resize的function来为第一个div工作。

这是我的代码示例：

           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; }  
  
    $(function () { $("div.ImResizable").resizable( { minHeight: 25, maxHeight: 85, minWidth: 470, maxWidth: 470, handles: { 's': $("div.ui-resizable-handle") } }); });  

Answer 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") } }); }); 

Answer 2

您正在寻找jQuery.each函数。

Answer 3

正确如上。 你需要遍历类的每个元素，并分配子或相关的句柄，你现在的方式，你正在分配div.ui-resizable-handle的generics类作为句柄div.ImResizable的generics类元素。 他们没有一对一的匹配。

Answer 4

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

例

从jQueryUI网站引用。 大胆增加强调。 http://api.jqueryui.com/resizable/#option-handles

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

HTML：

使用Javascript：

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