javascript - 如何使用 jQuery 用动态生成的元素包装页面元素？

Question

我有以下代码

var input = $('#el_id');
wrapper = $(document.createElement('div'));
wrapper.addClass('small');
wrapper.css('width',200);
input.wrap(wrapper);

alert(input.children().length)

对于孩子的长度，我得到 0。我想要的是：

<div class="small" style="width: 200px;">
     <input type="text" id="el_id" />
</div>

但我希望动态生成小 div。知道为什么这不起作用吗？

更新

事实证明我的问题在于另一行代码。我想在包装后将包装器分配给一个变量，并且：

block = input.wrap("<div class='"+container_class+"' style='width: "+wrap_width+"px;'></div>");

不起作用。它返回有意义的输入。但是我怎样才能返回包装器呢？

谢谢！

Answer 1

我相信你做对了。

您只需要将 wrap 函数的结果保存到变量中：

编辑： 更新代码以获取父（）：

var wrapped = input.wrap(wrapper).parent();
alert(wrapped.children().length);

Answer 2

从文档看来， wrap() 只接受 DOM 元素或字符串。您正在向它传递一个 jQuery 对象，这可能不起作用。我会试试这个：

$('#el_id').wrap('<div class="small" style="width: 200px;"></div>');

Answer 3

简单的。您正在尝试使用 jquery 对象而不是 wrap() 函数所期望的 dom 对象进行包装。