用另一個包裝一個元素，保留對包裝的引用？

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

雖然這已經是很久以前問，它仍然是一個問題（如2015年6月）的jQuery中（v1.11.1）。這裏是我的解決辦法，這感覺有點..嗯，應該說「特殊」，但工作仍然：

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);