如何使用jquery将输入元素更改为textarea

Question

我有以下html:

<div>
    <input type="text" style="xxxx" size="40"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="40"/>
</div>

现在我想将大小为"100"的每个输入更改为与输入具有相同样式的textarea.

我试过这个:

$("input[size=100]").each(function(){
  //how to replace it?
});

有任何想法吗？

---

我在这里的答案中使用了这个解决方案:

$("input[size=100]").each(function() {
    var style = $(this).attr('style'), textbox = $(document.createElement('textarea')).attr({
        id : $(this).id,
        name : $(this).name,
        value : $(this).val(),
        style : $(this).attr("style"),
        "class" : $(this).attr("class"),
        rows : 6
    }).width($(this).width());
    $(this).replaceWith(textbox);
});

Answer 1

jQuery有一个.replaceWith()方法可以用来将一个元素替换为另一个元素.因此,从输入中复制样式并使用此方法,如下所示:

$('input[size="100"]').each(function () {
    var style = $(this).attr('style'),
        textbox = $(document.createElement('textarea')).attr('style', style);
    $(this).replaceWith(textbox);
});

演示