jquery - 位置：相对环绕和元素高度？

Question

我有一个简单的 TextArea 和一个按钮

单击按钮时，我需要wrap（确切地）带有红色 div ( border:solid 1px red)的文本区域

ps 这个包装器 div 一定是position:relative因为我需要添加未来的绝对定位元素

所以我写了这段代码：

$(".btn").on('click',function (){
 
 $(".myTextArea").wrap($('<span/>', {
                    "class": 'msgAbsWrap',
                    "style": "position:relative;display:inline" /*it's inline by default ,I know*/
                  
                }));
});

但问题是它没有按应有的方式包装它：

• 为什么会这样？
• 如何使红色 div 包装（完全） textarea ？

JSBIN

ps 我使用的是 chrome v 26。

编辑

（我的错）我忘了从 textArea 中删除宽度（经过 1000 次测试）。它应该是width:100%。你现在可以试试吗？

JSBIN 新

Answer 1

将 span 的显示样式更改为display: inline-block;

$(".myTextArea").wrap($('<span/>', {
    "class": 'msgAbsWrap',
    "style": "position:relative; display:inline-block; width: 100%;"
}));

演示：JSBIN

Answer 2

您可以执行以下更改以使其生效：

CSS：

.msgAbsWrap {
   border:solid 1px red;
   display:inline-block;
   width:100%;
   position:relative;
}

jQuery：

$(".btn").on('click', function () {
  $(".myTextArea").wrap($('<span/>', {
        "class": 'msgAbsWrap'
  }));
});

签出更新的小提琴

Answer 3

将其更改为：

$(".btn").on('click',function (){
    $(".myTextArea").attr('class', 'msgAbsWrap');
});

jsbin：http: //jsbin.com/izopaz/12/

Answer 4

像这样做：

$(".btn").on('click',function (){

 $(".myTextArea").wrap($('<div></div>', {
    "class": 'msgAbsWrap',
    "style": "position:relative;"
 }));

});

检查这个例子：jsbin