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”附加到包装器上，这是一个在你“包装”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/

使用jQuery wrap函数

2 个答案: