1

特定の要素/ノードタイプでメソッドを実行する方法を理解するのに苦労していますが、他の要素/ノードタイプでは実行できません。

たとえば、ここにいくつかのHTMLがあります。

<div id="parent">
    <div class="subparent">Changing Text
        <div class="no-change">Changing Text</div>
    </div>
    <div class="subparent">Changing Text</div>
        <div class="child">Changing Text
            <div class="no-change">Changing Text</div>
        </div>
    <div class="subparent">Changing Text</div>
</div>

私の方法は次のようなものです。

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
        this.innerHTML = this.innerHTML
        .replace(/Changing Text/ig, "Edited!")
    });
};

ここで、div.no-changeにあるものを除くすべてのテキストを変更したいと思います。最終結果は次のようになります。

<div id="parent">
    <div class="subparent">Edited!
        <div class="no-change">Changing Text</div>
    </div>
    <div class="subparent">Edited!</div>
        <div class="child">Edited!
            <div class="no-change">Changing Text</div>
        </div>
    <div class="subparent">Edited!</div>
</div>

子に対してメソッドを実行せずに親を選択する方法がわかりません。どんな助けでもいただければ幸いです。ありがとう！

編集：ここではPauloのコードを使用していますが、機能していません：http: //jsbin.com/usaxa

Edit @ Jeff Meatball Yang：こんにちは、インプレース置換を使用すると、htmlではなくテキストとして出力されます：http： //jsbin.com/idina

また、他のメソッドを機能させることができませんでした：http: //jsbin.com/aguca

例を挙げていただけますか？

ありがとう！

4

2 に答える 2

7

なぜこれを行うためのプラグインを書いているのかよくわかりません。これにより<div>、＃parent内のすべての要素が検索され、のクラスを持たない要素が除外され、それら.no-changeのテキストコンテンツが編集されます。

$('#parent').find('div').not('.no-change').text('Edited!');

これは次のように書くこともできます：

$('#parent div:not(.no-change)').text('Edited!');

jQueryは一連の要素の処理に非常に優れているため、要素などをループする必要はありません。

編集：

これは、CMSの優れた観察を考慮に入れるために機能するはずです。

$('#parent').find('div').not('.no-change').each(function() {
    $(this).contents().not('*').eq(0).replaceWith('Whatever');    
});
于 2009-06-23T03:53:30.303 に答える
0

これを試して：

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
      // filter for text node
      var nodes = $(this).contents().filter(function() { return this.nodeType == 3); });

      // or do in-place editing
      for(var i = 0, len = nodes.length; i < len; i++) {
        nodes[i].nodeValue = nodes[i].nodeValue.replace(/Changing Text/ig, "Edited!");
      }
    });
};

// prove that no change is still white
$("#parent div.no-change").css("color", "white");

// change text, then make it red using jQuery
$("#parent div:not(.no-change)").changingtext().css("color", "red");

最終結果はすでにHTMLです。したがって、プラグインの呼び出し後に他のjQuery関数をチェーンできるようになります。私の編集を参照してください。

テキストノード値（nodes [i] .nodeValue）を設定する代わりに、それを削除して、その後にDIVを追加することができます。forループを使用してテキストを置き換える代わりに、forループを削除して、jQueryの組み込み関数を使用できます。

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
      // filter for text node
      var nodes = $(this).contents().filter(function() { return this.nodeType == 3); });

      // you can replace the text nodes:
      // insert a DIV after each one, 
      // then remove it from the DOM
      nodes.after("<div>Edited!</div>").remove();
    });
};

これは、操作とトラバーシングに関するjQueryドキュメント（http://docs.jquery.com ）に記載されています。

于 2009-06-23T17:13:18.180 に答える