1

我使用这个脚本用 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());
});

这是带有我要替换的字体标签的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>

我的脚本不会替换内部字体标签 ( <font color="#ff0000">Stet clita</font>)。知道为什么吗？

提前致谢

4

5 回答 5

1

你可以使用replaceWith方法。

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

小提琴

于 2012-08-31T18:34:09.443 回答
0

我猜想font首先将外部标签替换为新的span. font该操作实际上从 DOM中删除了初始内部元素，因此第二次迭代each()将失败。被替换的 newfont不受原始each()调用的约束，因此不会对其执行任何操作。

于 2012-08-31T18:26:14.483 回答
0

略有不同的方法：工作演示

请注意，与您的版本不同，更改仅在 中进行#output，而不是在#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() );
});​
于 2012-08-31T18:51:28.857 回答
0

尝试将线路更改为：

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

而不是

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

如果您确定<font>标签中只有文本，请执行此操作

于 2012-08-31T18:28:10.783 回答
0

试试这种深度优先的方法：

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);
});
于 2012-08-31T18:43:52.050 回答