2011-12-18 19 views
3

replaceWith()对我来说工作不正常。例如,给定这个HTML:replaceWith()不适用于克隆的分离节点

<div id="tree1"> 
    <div> 
     <h3>Item 1</h3> 
     <h3>Item 2</h3> 
     <h3>Item 3</h3> 
    </div> 
</div> 

这个代码不<li>小号取代<h3>节点:

var items_Bad = $("#tree1 div h3").clone(); 

$("#tree1 div").remove(); 
$("#tree1").append ('<ul id="Items1"></ul>'); 

//--- This does not replace anything! 
items_Bad.replaceWith (function() { 
    return ('<li>' + $(this).text() + '</li>'); 
}); 

$("#Items1").append (items_Bad); 


但是这个代码! :

var items_Good = $("#tree1 div h3").clone(); 

$("#tree1 div").remove(); 
$("#tree1").append ('<ul id="Items1"></ul>'); 

$("#Items1").append (items_Good); 

//--- But, this works! 
$("#Items1 h3"). replaceWith (function() { 
    return ('<li>' + $(this).text() + '</li>'); 
}); 


See the jsFiddle.

在这里,只有在节点(重新)连接到DOM,但the documentationreplaceWith()作品是:

对于jQuery 1.4,.replaceWith的()也可以在断开的DOM 节点上工作。

我错过了什么?

(请注意,我不控制原始页面的来源。而且,我有更多的操作去做,所以重新连接节点过早地操纵它们是不可取的。)

+0

当我的代码基于jQuery 1.4.4时,replaceWith()用于正常工作。当我切换到jQuery 1.9.1(没有在代码中做任何其他更改)时,.replaceWith停止工作。我想我会留在jQuery 1.4.4中。参与jQuery项目的人似乎并不了解向后兼容的含义。 – 2013-02-16 18:50:08

回答

5

下面的代码是一部分的replaceWith()与更换分离交易的节点(从jQuery 1.7.1 source直取,取模格式上略有差异):

replaceWith: function(value) { 
    if (this[0] && this[0].parentNode) { 
     // This deals with attached nodes... 
    } else { 
     return this.length 
      ? this.pushStack(jQuery(jQuery.isFunction(value) ? value() : value), 
       "replaceWith", value) 
      : this; 
    } 
} 

正如你可以看到,有两个限制,以防止该代码满足您的要求:

  • 提供的函数只在一个集合中被调用一次而不是每个元素一次,而在全局上下文中调用提供的函数。正在替换的元素不能通过this关键字获得)。

因此,恐怕更换分离的节点仍然是一项工作正在进行中,并且您必须回退到第二个解决方案,直到上述限制得到解决。

+0

谢谢。我应该提交错误报告还是功能请求? (我摇摆不定,因为我以前从不需要这个,并且已经有一个解决方法。) – 2011-12-18 19:57:37

+0

[简单搜索](http://bugs.jquery.com/search?q=replaceWith&go=&ticket=on)似乎没有返回任何相关的东西,所以你可能想打开一张票,是的。无论你是去[bug]还是[功能请求],都取决于你(我个人对此也很不确定,所以在提出可修改补丁之前我不会动。 – 2011-12-18 20:58:34

+0

我有这个相同的问题,有没有人想出一个更优雅的解决方案,而不是附加到全球?我试图制作一个TinyMCE插件,因此我正在使用的HTML是编辑内容,与CMS页面本身无关。 – gingerCodeNinja 2012-11-07 17:16:54