1

このスクリプトを使用して、ネストされたフォントタグをスパンタグに置き換えます。

$(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から削除するため、の2回目の反復each()は失敗します。置き換えられた新しいfontものは元のeach()呼び出しの対象ではないため、アクションは実行されません。

于 2012-08-31T18:26:14.483 に答える
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 に答える
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 に答える