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錯誤。 什么都沒有被取代。

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));
});

請參閱我的小提琴以供參考

Answer 2

replaceWith方法需要整個元素，而不是標記。 您需要使用新元素包裝頁面內容，然后刪除兩個原始div。

更新：這可能會讓你接近：

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

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

http://jsfiddle.net/isherwood/H36UE

有點不對勁，但我沒時間了。 祝好運。

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();
});