Jquery replaceWith 不工作答案

【问题标题】：Jquery replaceWith not workingJquery replaceWith 不工作
【发布时间】：2013-10-25 01:12:37
【问题描述】：

使用 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 错误。只是没有被替换。

【问题讨论】：

我觉得没问题。这适用于其他浏览器吗？
认真的吗？这“似乎没问题”？我不禁觉得元素节点和字符串之间存在根本的误解。
您是否可以在页面内容周围的 div 开头，该 div 是另外两个的兄弟？这会让生活变得简单。

标签： javascript jquery dom-manipulation replacewith

【解决方案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));
});

请参阅myfiddle 以供参考

【讨论】：

我的理解是，您所描述的是 html() 而不是 replaceWith(); html() 替换标签之间的内容； replaceWith 替换元素。这是我从中得到的 StackOverflow 帖子：stackoverflow.com/questions/730916/…

【解决方案2】：

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

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

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

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

http://jsfiddle.net/isherwood/H36UE

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

【讨论】：

感谢伊舍伍德！在 JQuery 文档中，说 replaceWith 可以接受 HTML 字符串（以及元素、数组或 jquery）。我使用的似乎符合 HTML 字符串的定义：api.jquery.com/Types/#htmlString.
问题似乎是 JQuery 会将标签自动填充到元素中，因此您不能单独插入开始和结束标签（它似乎忽略了结束标签。）但是，这仅适用于插入文本如预期：jsfiddle.net/rqrxv
很高兴知道。谢谢。
这是我最终使用的，紧跟您的示例。示例 HTML 更多地显示了客户端站点中树的结构：jsfiddle.net/H36UE/1。非常感谢您的帮助！

【解决方案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();
});

【讨论】：