Jquery replaceWith不工作

使用Jquery 1.7.1

我有两个div

 {page content here} 
 

那些显示在页面源中。 但是我在页面底部添加的这个jquery不起作用：

  $(document).ready(function () { $("div.highlightStart").replaceWith("
"); $("div.highlightEnd").replaceWith("
"); });  

浏览器控制台（Chrome）中没有显示javascript错误。 什么都没有被取代。

Answer 1

首先，我想在网站上生成一个不正确的DOM结构。 如果您的脚本将运行，它将如下所示：

 
 {page content here} 
 

如果你想要的话，这不是一个好的结构：

 
 {page content here}  

应该是这样的：

你的DOM：

 
 {page content here}  

在你的脚本中：

 $(document).ready(function () { content = $('#content').text(); $('#content').html($('
').text(content)); }); 

请参阅我的小提琴以供参考

Answer 2

replaceWith方法需要整个元素，而不是标记。 您需要使用新元素包装页面内容，然后删除两个原始div。

更新：这可能会让你接近：

 $(document).ready(function () { $('.highlightStart').nextUntil('.highlightEnd').andSelf() .wrap('
'); $('.highlightStart, .hightlightEnd').remove(); }); 

http://jsfiddle.net/isherwood/H36UE

有点不对劲，但我没时间了。 祝好运。

Answer 3

根据isherwood的帮助，使用此作为解决方案：

http://jsfiddle.net/H36UE/1/

使用这样的HTML树：

 
highlightStart
 
Outside
Content to Highlight
More
 
second
 
third
 
highlightEnd 

这个Javascript：

 $(document).ready(function () { $('.highlightStart').parent().parent().replaceWith("
"); $('.highlightEnd').parent().parent().replaceWith("
"); $('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll("
"); $('.highlightStart, .highlightEnd').remove(); });