4

<div>特定のクラスを除いて、内のすべての html フォーマットを削除しようとしています。

私は試した

$('div#text :not(a.keep)').contents().each(function () {
    $(this).html($(this).text());
});

しかし、それはdivの内容に何も変更しません.

サンプル入力:<span>a </span><span><a class="keep">b</a></span> c

望ましい出力:a <a class="keep">b</a> c

なぜ ？

なぜ私はこれをやろうとしているのですか? contenteditable の div があり、ユーザーが入力した内容をフォーマットしたいと考えています。タイマーがあり、数秒ごとに div の内容をチェックしてフォーマットするものを見つけますが、保持するようにマークされたものを保持したいと思います。

4

2 に答える 2

1

notセレクター機能を使用できます。

$('div#text').not(a.keep).contents().each(function () {     
    $(this).html($(this).text()); 
});

ただし、への呼び出しは、contents()テキスト ノードと html ノードを返すのは奇妙に思えます。選択したすべての要素の html プロパティを設定しようとしていることがわかりますが、これは奇妙に見えます (テキスト ノードに設定する html はありません)。

ノードのすべてのテキストを取得し、そのノードの html をテキスト コンテンツのみに置き換えたい場合は、次のように変更します。

$('div#text').not(a.keep).children().each(function () {     
    $(this).html($(this).text()); 
});

しかし、それがあなたが達成しようとしているものなら、私はお勧めします

$('div#text').not(a.keep).children().each(function () {     
    var text = $(this).text();
    $(this).empty().html(text); 
});

意図が見えやすいからです。a.keep選択した要素の1つにネストできた場合、再帰の問題は解決しません

于 2012-10-11T12:18:36.240 に答える
0

問題は.keep、要素のどこにでも（深く）いることができるということです

別のアプローチを次に示します。
アイデアは、#text含まれているすべての要素を取得し、それぞれをループして、要件に一致しているかどうかを確認することです。

これがサンプルです

function getChildrenDeep(elem)
{
    var ret = [];

    $(elem).each(function(k,v){
        ret.push(v);
        if ($(v).children().length > 0) ret = $.merge(ret,getChildrenDeep($(v).children()));
    });

    return ret;
}
var plainChildren = getChildrenDeep($("#text")),
    final = '';

$(plainChildren).each(function(k,v){
    if (!$(v).hasClass("keep"))
        final += $(v).clone().children().remove().end().text(); /* See Reference */
    else
        final += $(v)[0].outerHTML;
});

document.write(final);

http://jsfiddle.net/5hjnX/4/

参照

于 2012-10-11T13:18:43.887 に答える