Jquery的replaceWith不工作

我有兩個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錯誤。沒有任何東西被取代。

來源

2013-10-21 Conando

似乎對我好。這是否適用於其他瀏覽器？ –

認真嗎？這'看起來沒問題'？我不禁感到元素節點和字符串之間存在根本的誤解。 –

你是否能夠以頁面內容的div開始，這是另一個兄弟的兄弟？那會讓生活變得簡單。 – 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(); 
});

來源

2013-10-24 17:12:37 Conando

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

更新：這可能讓你接近：

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

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

http://jsfiddle.net/isherwood/H36UE

有什麼地方了與這一點，但我沒時間了。祝你好運。

來源

2013-10-21 23:30:37 isherwood

謝謝你的Isherwood！在JQuery文檔中，是說replaceWith可以接受HTML字符串（以及元素，數組或jquery）。我使用的似乎符合HTML字符串的定義：http://api.jquery.com/Types/#htmlString。 – Conando

這個問題似乎是，JQuery會自動完成一個元素到一個元素，所以你不能單獨插入一個開始和結束標籤（它似乎忽略結束標籤）。但是，這隻適用於插入文本預期：http：///的jsfiddle。net/rqrxv/ – Conando

很高興知道。謝謝。 – isherwood

首先，我想要網站，你是一個生產不正確的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參考

來源

2013-10-21 23:40:23

已經更新謝謝！ –

非常漂亮。 – OptimusCrime

我的理解是，你所描述的將是html（）而不是replaceWith（）; html（）替換標籤之間的內容; replaceWith替換元素。這裏是StackOverflow後我從這裏得到：http://stackoverflow.com/questions/730916/whats-the-difference-between-jquerys-replacewith-and-html – Conando

Jquery的replaceWith不工作

回答

相關問題