更換嵌套的HTML標籤

Question

我使用這個腳本通過span標籤替換嵌套字體標籤：

$(document).ready(function(e) { 
    var content = $('div').first(); 

    $('#input font').each(function(index, value){ 
     var span = document.createElement('span'); 
     span.style.color = $(this).attr('color'); 
     span.innerHTML = $(this).html(); 
     $(content).children('font').first().replaceWith(span); 
    }); 
    $('#output').html($(content).html()); 
}); 

，這是與字體標籤我想更換

<div id="input"> 
    At vero eos et accusam et justo duo dolores et ea rebum. <font color="#00FF99"><font color="#ff0000">Stet clita</font> kasd gubergren</font>, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</div> 
<div id="output"></div> 

我的腳本沒有按的HTML不會替換內部字體標籤（<font color="#ff0000">Stet clita</font>）。任何想法爲什麼？

在此先感謝

Answer 1

略有不同的方法：working demo

注意，不像你的版本，變化是唯一在中製作，不在#input;我懷疑這是你的意圖，根據名稱（因此使用.clone()）。

$(document).ready(function(e) { 
    var content = $('div').first().clone(); 
    var fnt = content.find('font'); 
    while(fnt.length > 0) { 
     var current = fnt.first(); 
     var span = $('<span />') 
      .css('color', current.attr('color')) 
      .html(current.html()); 
     current.replaceWith(span); 
    } 
    $('#output').html($(content).html()); 
});​ 

Answer 2

我猜想，外font標籤首先與新span取代。該操作實際上從DOM中刪除了最初的內部元素font，因此第二次迭代each()將失敗。被替換的新font不受原始each()調用的限制，因此不對其執行任何操作。

Answer 3

嘗試換款行：

istead的

span.innerHTML = $(this).html(); 

span.innerHTML = $(this).text(); 

做，如果你確信<font>標籤只有文字裏面他們

Answer 4

可以使用replaceWith方法。

$('#input font').each(function(){ 
    var $this = $(this); 
    var $span = $('<span/>', { 
        text: $this.text(), 
        style: "color:" + $this.css('color') 
       }) 
    $this.replaceWith($span) 
}); 

Fiddle

Answer 5

試試這個深度第一種方法：

http://jsfiddle.net/C8euR/1/

function replace(el) { 
    if (el.length == 0) return; 
    replace($(el).children('font')); 
    if ($(el).is('font')) { 
     var span = document.createElement('span'); 
     span.style.color = $(el).attr('color'); 
     span.innerHTML = $(el).html();  
     $(el).replaceWith(span);  
    } 
} 


$(function(e) { 
    var content = $('div').first(); 
    replace(content); 
});