Jquery的replaceWith方法无法正常工作

Question

使用Jquery 1.7.1版本。

我有两个div元素。

<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div> 

这些内容显示在页面源代码中。但是我在页面底部添加的这个jquery没有起作用：

<script type="text/javascript" id="makeHighlight">
   $(document).ready(function () {
     $("div.highlightStart").replaceWith("<section class='highlight'>");
     $("div.highlightEnd").replaceWith("</section>"); 
   });
</script>

在浏览器控制台（Chrome）中没有显示任何JavaScript错误。只是没有替换任何内容。

- Conando

---

对我来说看起来还不错。这在其他浏览器上能正常工作吗？ - Drixson Oseña

真的吗？“看起来还可以”？我禁不住感觉元素节点和字符串之间存在根本性的误解。 - David Thomas

你能否以一个包装页面内容的div作为另外两个div的兄弟元素来开始吗？这样会让事情变得简单。 - isherwood

Answer 1

首先，我想指出您正在生成错误的DOM结构。如果您运行脚本，它将如下所示：

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div> 

如果你想要以下内容，那么这个结构并不好：

<section>
{page content here}
</section>

应该像这样：

你的 DOM：

<div id="content">
{page content here}
</div>

在你的脚本中：

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

  $('#content').html($('<section>').text(content));
});

请参考我的示例。

- Drixson Oseña

---

我的理解是你所描述的应该使用html()而不是replaceWith(); html()会替换标签之间的内容；而replaceWith则是替换整个元素。这是我从StackOverflow得到的答案：https://dev59.com/1nRB5IYBdhLWcg3wETxJ - Conando

Answer 2

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

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

$(document).ready(function () {
   $('.highlightStart').nextUntil('.highlightEnd').andSelf()
       .wrap('<section class="highlight"></section>');

    $('.highlightStart, .hightlightEnd').remove();
});

http://jsfiddle.net/isherwood/H36UE

这里有些不对劲，但我已经没有时间了。祝你好运。

- isherwood

---

谢谢你的回复，Isherwood！在 JQuery 的文档中，它说 replaceWith 可以接受一个 HTML 字符串（以及元素、数组或 jQuery）。我正在使用的似乎符合 HTML 字符串的定义：http://api.jquery.com/Types/#htmlString。 - Conando

问题似乎在于JQuery会将标签自动完成为元素，因此您无法单独插入开始和结束标记（它似乎会忽略结束标记）。但是，这可以按预期插入文本：http://jsfiddle.net/rqrxv/ - Conando

这就是我最终采用的方法，紧密地遵循了你的示例。示例HTML显示了客户网站上树形结构的更多结构：http://jsfiddle.net/H36UE/1/。非常感谢你的帮助！ - Conando

Answer 3

在 isherwood 的帮助下，使用此解决方案：

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

以如下 HTML 树形结构为例：

<div><div><div class="highlightStart">highlightStart</div></div></div>
<div>Outside<div>Content to Highlight</div>More</div>
<div>second</div>
<div>third</div>
<div><div><div class="highlightEnd">highlightEnd</div></div></div>

这段 JavaScript 代码：

$(document).ready(function () {
  $('.highlightStart').parent().parent().replaceWith("<div class='highlightStart'>");
  $('.highlightEnd').parent().parent().replaceWith("<div class='highlightEnd'>");
  $('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll("<section class='highlight'>");

 $('.highlightStart, .highlightEnd').remove();
});

- Conando