javascript - 使用 jQuery 包装函数

Question

我正在尝试用 div 包装输入元素，然后将另一个元素附加到包装 div。

标记：

<div>
    <input type="text" id="foo" />
</div>

JS：

var wrapper = $('<div class="wrapper"></div>'),
somethingElse = $('<div class="something-else"></div>');

$('#foo').wrap(wrapper);
wrapper.append(somethingElse);

JSFiddle：http: //jsfiddle.net/ckpeZ/

问题是“somethingElse” div 没有附加到包装器中。就像这条线wrapper.append(somethingElse)被完全忽略了。我究竟做错了什么？

Answer 1

您正在将 ' somethingElse' 附加到包装器中，这是一个在您 'wrap' foo 之后不再相关的引用。

这很丑陋，但是可以理解-您应该能够简单地：

$('#foo').wrap(wrapper);
$('#foo').parents('.wrapper').append(somethingElse);

Answer 2

包装器正在被克隆，您需要附加到创建的新元素。

var wrapper = $('<div class="wrapper"></div>'),
somethingElse = $('<div class="something-else"></div>');

$('#foo').wrap(wrapper).parent().append(somethingElse);
// or
$('#foo').wrap(wrapper).after(somethingElse);

http://jsfiddle.net/ckpeZ/4/