Jquery 替换与不起作用

Jquery replaceWith not working

本文关键字：不起作用 替换 Jquery      更新时间：2023-09-26

Using 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错误。只是什么都没有被取代。

首先，我想指出您正在产生不正确的 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));
});

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

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

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

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

http://jsfiddle.net/isherwood/H36UE

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

基于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();
});
相关文章：