1

これは私が犯している非常に基本的な間違いだと確信していますが、どこが間違っているのかわかりません。

この基本的なフィドルの例では、5 つの div があることがわかります。各 div の途中にある単語を別の単語に置き換えようとしていますが、最初の投稿番号からわかるように、最初の div の内容を他のすべての div にコピーしているようです。

これを行うために使用しているコードのスニペットは

$('.post').each(function(){
    $('em').html( 
        $('em').html().replace('in','hello')
    );
});

誰かが私が間違っているところを見るのを手伝ってくれますか?

4

2 に答える 2

5

各テキストをすべてのsのテキストの emコンテンツに置き換えています。また、参照に使用したり、現在のhtmlをパラメーターとして使用したりできる関数を受け入れます。emhtmlthis

$('.post em').html(function (idx, html){
    return html.replace("in", "hello");
});

更新されたjsFiddleデモ。

于 2013-02-14T12:11:02.420 に答える
3

必要はありません.each- のバージョンを使用して.text、ミューテーター関数を取り、.each一致する各要素に対して暗黙的に実行できます。mutator 関数に元のテキストが渡され、戻り値が元の場所に戻されます。

replaceIn = function() {
    $('.post em').text(function(ix, txt) {
        return txt.replace(/\b(in)\b/g, 'hello');
    });
}

http://jsfiddle.net/alnitak/ZUQ4W/を参照してください

一致する要素内に HTML がないため、.text代わりに使用しました。.html

正規表現と/gフラグを使用して、「in」のすべての\b出現が置換されるようにし、マーカーが単語全体のみに一致するようにすることに注意してください。

の文字列バージョンはreplace、文字列内の最初の一致のみを置き換えることができます。もちろん、それがあなたの意図であれば、代わりにそれを自由に使用してください!

また、子孫を持つ要素で this (または を使用するバリアント) を使用する場合は、非常に注意する必要があります。これ.htmlは、外側の要素が内側の要素の前に処理され、外側の要素に対する操作が子孫に予期しない変更を加える可能性があるためです。リーフ ノードのみが変更されるように、セレクターを賢く選択してください。

避けるべきもう 1 つの正当な理由.html()は、要素をシリアル化してから再度逆シリアル化すると.html()、その要素に設定されているプロパティやイベントが失われることです。可能な限り、HTML 文字列操作を使用せずに DOM を変更する必要があります。

安全のために、これを使用してください：

replaceIn = function () {
    $('.post em').contents().filter(function () {
        return this.nodeType === 3;
    }).each(function() {
        // NB: DOM level 3 uses .textContent in preference to .nodeValue
        this.nodeValue = this.nodeValue.replace(/\b(in)\b/g, 'hello');
    });
}

indexこれにより、ネストされた要素 (タグなど) を変更できないことが絶対に保証されます。

http://jsfiddle.net/alnitak/rZU5d/を参照してください

于 2013-02-14T12:15:24.953 に答える