Question

jQuery wrap()方法不会使用您创建的元素进行换行，而是使用副本：

var $orig = $('p'); // some existing element
var $wrap = $('<div>').css({border:'1px solid red'});
$orig.wrap($wrap);
$wrap.append('<p>SMOKE YOU</p>'); // does not appear after the original element

如果您不相信，可以在此处查看上述的实时版本：http://jsfiddle.net/QRmY6/

如何最好地创建非平凡的动态内容来包装现有节点，同时保留对内容周围的包装器的引用？

Answer 1

我提出的最佳选择是：

// Technique 1 - swap it out and then embed it via append
var $wrap = $('<div>').css({border:'1px solid red'});
$orig.replaceWith($wrap);
$wrap.append($orig);

// Technique 2 - create it inline and then modify it
var $wrap = $orig.wrap('<div>').parent().css({border:'1px solid red'});

Answer 2

尽管很久以前就已经提出这个问题，但在jQuery（v1.11.1）中它仍然是一个问题（截至2015年6月）。这是我的解决方法，感觉有点......好吧，我们应该说'特别'，但仍然有效：

var $orig = $('p'); // some existing element
var $wrap = $('<div>').css({border:'1px solid red'});

$wrap = $orig.wrap($wrap).parent(); //the object that is being wrapped is returned, so selecting its parent will get the wrapper. Re-setting that in the $wrap variable will retain the wrapper for reference

$wrap.append('<p>SMOKE YOU</p>'); // this will now work

注意：需要注意的是$wrap元素不再可用于包装，因为它现在包含$orig元素。解决方法是以另一种“特殊”方式使用add()：

var $orig = $('p'); // some existing element
var $wrap = $('<div id="wrapper">').css({border:'1px solid red'});

$wrap = $wrap.add($orig.wrap($wrap.clone().empty()).parent()); //the object that is being wrapped is returned, so calling for its parent will return the wrapper.

$wrap.append('<p>SMOKE YOU</p>'); // this will now work

$wrap = $wrap.add( $('div.otherdiv').wrap($wrap.clone().empty()).parent())

console.log($wrap); //as you can see the $wrap variable now contains two divs

$wrap.css({'border' : '1px solid blue'}); //this will now work on all wraps

代码不是很清楚，但它有效！有关工作示例，请参阅this Fiddle。

Answer 3

感到惊讶的是，jQuery并不足以保持引用。这是一个简单的香草JS方式：

orig.parentNode.replaceChild(wrapper,orig);
wrapper.appendChild(orig);

用另一个元素包裹一个元素，保留对包装的引用？

3 个答案: